Probleme mit relativ positionierten Div-Layern

[blacksy]

Hallo, ich hab ein kleines Problem mit Div-Layern.

In meinem Weblog sehen diese unterteilenden Bilder mit "Blabla Wrote" unter Safari aus wie sie aussehen sollen, unter Opera und dem Internet Explorer sieht es allerdings aus irgend einem Grund so aus: http://www.geocities.com/athena_hp/misc/pimpscreenie.jpg

Die Namensbanner sollen bis ganz an den Rand gehen (auf beiden Seiten), da die Inhalte (inkl Banner, Texte etc) vom CMS allerdings in eine Tabelle geparst werden die nicht bis ganz an den Rand geht.

<table border="0" width="547" cellspacing="1" cellpadding="3">

Also blieb mir nichts anderes übrig als die Bilder in einen Layer zu packen und den dann korrekt zu positionieren. Und zwar relativ um 39 Pixel nach Links verschoben.

<div id="iru" style="position:relative; width:200px; 
                          height:44px; z-index:2; left: -39px;">
<img src="..." width="617" height="43" border="0" class="noborder">
</div>

Positioniert man die Layer relativ, dann schlucken Firefox und Safari das zwar ohne Murren, der Internet Explorer und Opera drehen allerdings total durch: Obwohl das Bild eigentlich in einem Layer ist, wird die Tabelle die den Layerquelltext enthält (und eigentlich nur 420 px breit sein sollte) auf die Breite des Bildes gestreckt und zudem wird der Layer um etwa 30 Pixel nach Links verschoben...

Ich hab schon einige andere Lösungen ausprobiert, aber bei denen hat man immer das Problem, dass die Inhalte-Tabelle von Haus aus ein cellspacing="1" cellpadding="3" hat, was man auch nicht abstellen kann.................. Folglich bekommt man die Bilder ohne Layer niemals bis ganz an den Rand.

Ich bin am Ende meines Lateins. Hat sonst keiner eine Idee?

 

[SaC]

Ich konnte das zwar nur in Safari und Camino testen, aber wie wär's mit etwas wie

<div style="margin-left=-4px;">...</div>

 

[blacksy]

Wow, das hilft tatsächlich. Die Mozilla-Browser und Safari schlucken das weiterhin und bei Opera/MSIE ist es nicht mehr gaaaanz so verzerrt. Danke vielmals.

Aber eine perfekte Lösung scheint es wohl nicht wirklich zu geben. Opera hat scheinbar allgemein Probleme mit Layern, da z.B. einer der Layer trotz "visiblity:hidden" erscheint. Grah!! Naja, auf MSIE 7 hoffen

 

[dms]

Opera hat scheinbar allgemein Probleme mit Layern, da z.B. einer der Layer trotz "visiblity:hidden" erscheint. Grah!!

Da wiederspreche ich Dir aber ganz gewaltig! Wenn Opera etwas falsch anzeigt hängt es definitiv an Fehlern im Quellcode/CSS.
Mein Vorgehen ist immer so: Ich entwickle das Layout erst mal für Opera, da es mein Standardbrowser ist. Siehts im Opera gut aus, kann man sich zu 99% sicher sein dass es im Mozilla identisch aussieht. Am Schluss kommt die Extrawurst für den IE in einer extra Datei. So komme ich eigentlich immer recht schnell zu einem guten Ergebnis.

 

[blacksy]

Hmmmh, wenn ich dir ne kleine Datei mit ein paar Zeilen Code bastel in der man das mal sieht, könntest du dir das dann bitte anschauen? Ich seh echt kein Licht am Ende des Tunnels

Kann man das sonst irgendwie so machen, dass man für den MSIE und Opera ein anderes CSS benuntzt als für Firefox und Safari? Per JavaScript oder so?

 

[dms]

Hmmmh, wenn ich dir ne kleine Datei mit ein paar Zeilen Code bastel in der man das mal sieht, könntest du dir das dann bitte anschauen?

Du könntest es mal versuchen. Gibt jedoch keine Garantie dass ich Zeit und/oder Lust habe es mir anzuschauen.

Kann man das sonst irgendwie so machen, dass man für den MSIE und Opera ein anderes CSS benuntzt als für Firefox und Safari? Per JavaScript oder so?

Geht sowohl mit, als auch ohne JavaScript. Für den IE gibt es Conditional Comments. Für den Opera müsstest Du mit einem CSS-Hack arbeiten. Per JS kannst Du ja einfach entsprechende Browsereigenschaften abfragen und ggf. per document.write die CSS-Datei verlinken. Würde ich aber so nicht machen.

 

[arne1900]

MSIE 7 hoffen

Das denk ich mir auch immer .
Ich bekomms dann irgendwann hin, kann aber im Nachhinein oft nicht sagen, an was es ganz genau lag, außer am IE