Sven Rautenberg: CSS Probleme mit IE/Netscape

Beitrag lesen

Aloha!

Ich habe hier einen Seitenentwurf. Mit dem IE6 sieht die Seite wie gewollt aus. Allerdings mit Netscape7 und Opera6 nicht.

Gehe davon aus, daß IE6 die Seiten möglicherweise falsch (d.h. nicht dem W3C-Standard entsprechend) darstellt. Orientiere dich an Netscape7 und Opera - die machen es richtig. IE6 kann es zwar auch, aber nur, wenn er sich im Standards-Mode befindet. Soweit ich weiß, schaltet er aufgrund deiner ersten Zeile mit der XML-Angabe in den Sloppy-Modus - da verhält er sich genauso, wie alle IE vor ihm.

  1. Wird die Navigation beim Hover-Effekt verschoben. Warum????

In Opera6 verschiebt sich nichts. Es kommt aber auch kein Hover-Effekt. Aber wenn ich raten soll, würde ich sagen, die Verschiebung kommt durch die unterschiedlichen Rahmenbreiten im Normalzustand und bei :hover. Ein IMO durch dein Stylesheet vollkommen berechtigtes Verhalten.

Allerdings ist zu beachten: Wenn sich durch :hover (oder :active/:focus) die Größe des Elements ändert, dann _kann_ der Browser die Bildschirmausgabe neu rendern (was bei Links, die in Fließtext stehen und bei :hover fett werden, ziemlich ätzend aussehen kann, weil der Text möglicherweise neu umbrochen wird), oder aber auch nicht (dann wird der Link zwar eine Fettschrift, das Ende des Textes wird aber einfach abgeschnitten, weil nur der ursprüngliche Raum des Links zur Verfügung steht).

  1. Das Logo-Bild ist nicht bündig mit den Rahmen des Hover-Effekts. Aber alles hat eigentlich 120 Pixel Breite.

Hm, soll ich mal nachrechnen:

Von Links nach rechts addieren sich border, padding, width, padding und border gemäß dem Standard (und außenrum noch margin, der hier auf 0px gesetzt ist):
3px+2px+110px+2px+3px = 120px - Das ist die Breite deiner Links.

Der IE rechnet hier leider falsch, indem er padding und border als in width enthalten betrachtet (jedenfalls in den alten IE und im IE6/Sloppy Mode):

110px (enthält 3px+2px+2px+3px) = 110px - so breit ist auch dein Bild.

Schalte in den Standards-Modus, und der IE6 rechnet richtig (d.h. so, wie die anderen Browser). Diesen Modus kriegt man, indem man keine XML-Angabe macht, aber einen DOCTYPE mit URL setzt.

Dann hast du aber immer noch das Problem mit den alten IEs.

Lösung: Zwei DIV verschachteln. Den Äußeren setzt du auf die gewünschte Breite, und dem Inneren gibst du Border und Padding. Funktioniert in allen Browsern.

  1. Obwohl Navigation und Inhalt mit 10 Pixel vom oberen Rand positioniert werden, wird der Inhalt-Div nach unten geschoben????

Was da falsch läuft, erschließt sich mir auf den ersten Blick nicht.

PS: Du solltest für body eine Hintergrundfarbe definieren - weiß ist nicht bei allen Browsern Standard, das muß man explizit sagen, sonst sieht die Seite etwas doof aus. Ich habe z.B. (damit ich das merke, wenn ich Seiten schreibe) ein trauriges Grau als Hintergrund. Oder auch ein flippiges türkis. Paßt beides nicht zu Webseiten, die man gewöhnlich so im Netz findet, und fällt deshalb unangenehm auf.

- Sven Rautenberg