nicht angemeldet
Rahmen bei nicht-IE von DIV überlappt
Ich habe nicht direkt ein Problem, sondern eher eine Frage.
Und zwar bereite ich gerade die Grundstruktur für ein Magazin vor und möchte die Elemente der Site per absolut positionierter DIVs bestimmen. Das klappt soweit auch ganz gut, doch wenn ich für die DIVs (teilweise) einen Rahmen definiere, so sieht es im IE prima aus, im Mozilla/Netscape/Opera jedoch wird der Rahmen an der Stelle an der ein anderes DIV aneckt von diesem DIV überlappt.
Beispiel:
<div style="position:absolute; height:80px; border:1px solid black"></div>
<div style="position:absolute; top:80px;"></div>
Im IE ist dieses Beispiel sauber untereinander, durch den Rahmen im ersten DIV voneiander separiert.
Die anderen Browser jedoch lassen das untere DIV den oberen Rahmen überlappen.
Mich würde nun interessieren, ob es so ist, dass der IE die jeweiligen äusseren Pixelreihen zum Rahmen definiert und die Alternativbrowser einen Rahmen dranhängen, oder wie muss ich mir das vorstellen? Wenn ja, welcher Browser hat dann "Recht"? Rein logisch müsste es doch so sein, dass wenn das obere DIV 80px hoch ist, das andere bei 81px anfangen müsste, oder? Wenn ich das jedoch so mache, ist im IE eine Leerzeile dazwischen. Ach herrje, ich hoffe das ist jetzt keine total blöde Frage *lol*
Wie vermeidet man diesen Effekt am Elegantesten? Ich hab jetzt als Spontanlösung den z-Index so gesetzt, dass die überlappenden Nicht-Ränder weiter hinten liegen und es klappt.
Die Site: http://akbweb.de/networks/
-
HI
Mich würde nun interessieren, ob es so ist, dass der IE die jeweiligen äusseren Pixelreihen zum Rahmen definiert und die Alternativbrowser einen Rahmen dranhängen, oder wie muss ich mir das vorstellen?
Genauso, beim IE ist "width" der Abstand vom äußeren Ende des einen Borders zum anderen - nennt man boxbug. Woanders (und auch nach W3C) ist 'width' NUR die Breite des Inhaltes. 'Height' sinngemäß genauso.
Wenn ja, welcher Browser hat dann "Recht"?
alles außer dem MSIE.
Das gute: Microsoft hat das Problem mehr oderminder gelöst - allerdings muss man den IE durch Angabe eines geeigneten DOCTYPE in den "Standards-mode" zwingen. Dies gelingt zum Beispiel durch
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html401/DTD/loose.dtd"> - die Angabe einer URL im DOCTYPE ist erforderlich!Grüße aus Bleckede
Kai
-
Das gute: Microsoft hat das Problem mehr oderminder gelöst - allerdings muss man den IE durch Angabe eines geeigneten DOCTYPE in den "Standards-mode" zwingen. Dies gelingt zum Beispiel durch
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html401/DTD/loose.dtd"> - die Angabe einer URL im DOCTYPE ist erforderlich!Also kann ich dies so übernehmen, das Stylesheet kurz W3C-konform machen und schon sind alle Workarounds überflüssig? Prima :-D
-
Hallo,
Das gute: Microsoft hat das Problem mehr oderminder gelöst - allerdings muss man den IE durch Angabe eines geeigneten DOCTYPE in den "Standards-mode" zwingen. Dies gelingt zum Beispiel durch
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html401/DTD/loose.dtd"> - die Angabe einer URL im DOCTYPE ist erforderlich!In diesem Beispiel ist /DTD zuviel und bei Verwendung von <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> ist die DTD-Referenz keine Bedingung fuer den "standards-compliant mode".
MfG, Thomas
-
Das gute: Microsoft hat das Problem mehr oderminder gelöst - allerdings muss man den IE durch Angabe eines geeigneten DOCTYPE in den "Standards-mode" zwingen.
-
-
Hallo,
Rein logisch müsste es doch so sein, dass wenn das obere DIV 80px hoch ist, das andere bei 81px anfangen müsste, oder?
Rein logisch ist es bei 82px!
In deinem Fall:
Border + Inhalt + Border
1px + 80px + 1pxMeher: http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions
Grüße
Thomas