nicht angemeldet
CSS Probleme mit IE/Netscape
Folgendes.
Ich habe hier einen Seitenentwurf. Mit dem IE6 sieht die Seite wie gewollt aus. Allerdings mit Netscape7 und Opera6 nicht.
1. Wird die Navigation beim Hover-Effekt verschoben. Warum????
2. Das Logo-Bild ist nicht bündig mit den Rahmen des Hover-Effekts. Aber alles hat eigentlich 120 Pixel Breite.
3. Obwohl Navigation und Inhalt mit 10 Pixel vom oberen Rand positioniert werden, wird der Inhalt-Div nach unten geschoben????
Weiß jemand da mehr?
-
Schon wieder die Adresse vergessen.
www.romantischesreferat.de/develop/facetten/abgrenzung.html
www.romantischesreferat.de/develop/type.css (externe css)
-
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.
- 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).
- 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.
- 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
-
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.
Ich habe immer gedacht, IE wäre der Browser, der die Standards am besten interpretiert. Hat sich das mit Netscape 6 und 7 geändert?
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.
Richtig. Bei manchen Linkzuständen war die Breite auf Standard gesetzt. Ich habe jetzt alles vereinheitlicht. Funktioniert.
- 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.
Das ist aber auch zum verrückt werden. Da werde ich noch ein bißchen dran grübeln.
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.
Das werde ich noch machen. :-)
Wo kann man denn die Modi von IE einstellen? Ehrlich gesagt, davon habe ich noch nie gehört. Das steht auch nicht in Selfhtml, oder?
Vielen lieben Dank für die ausführliche Antwort. Das ist echt total super von dir. Noch einen schönen Sonntag.
-
Aloha nochmal!
Ich habe immer gedacht, IE wäre der Browser, der die Standards am besten interpretiert. Hat sich das mit Netscape 6 und 7 geändert?
Der IE ist, was die Standards angeht, leider in vielen Belangen Schrott.
Außerdem: Er hat einen relativ fehlertoleranten HTML-Parser - das ist ein Plus für den normalen Anwender, weil Fehler in einer Seite immer mal vorkommen können, und der Anwender so immerhin noch was zu sehen bekommt. Aber für Entwickler ist das leider total unpassend, weil man so seine eigenen Fehler, die in anderen Browsern böse Ergebnisse verursachen, nicht sieht.
Meine Empfehlung: Mozilla und Opera sind strenger, was die Fehlerfreiheit des HTML-Codes angeht - also solltest du unbedingt damit testen und entwickeln. Außerdem ist Mozilla vermutlich der standardkonformste Browser (neben Opera, der auch sehr gut in dieser Sache ist), den es derzeit gibt. Der IE hat außer dem sehr lästigen width- und height-Bug, über den du auch gestolpert bist, diverse Dinge, die einen in den Wahnsinn treiben können.
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.
Richtig. Bei manchen Linkzuständen war die Breite auf Standard gesetzt. Ich habe jetzt alles vereinheitlicht. Funktioniert.
Wenn sich die Rahmenbreite verändert, kannst du durch Padding die fehlende Breite ausgleichen, und der Text sollte sich nicht mehr verschieben.
Was da falsch läuft, erschließt sich mir auf den ersten Blick nicht.
Das ist aber auch zum verrückt werden. Da werde ich noch ein bißchen dran grübeln.
Tipps zur Lösung: Positionierung mal ändern, auch andere Positionierungen ändern, und gucken, wer da auf was Einfluß nimmt. Setze eine Hintergrundfarbe in die Layer, damit du siehst, wie groß sie sind und wo sie sich befinden.
Und wenn die verschobene Darstellung in allen Browsern gleichermaßen auftritt, positioniere einfach anders. :)
Wo kann man denn die Modi von IE einstellen? Ehrlich gesagt, davon habe ich noch nie gehört. Das steht auch nicht in Selfhtml, oder?
Nein, das steht noch nicht in Selfhtml.
Der IE (und übrigens auch Mozilla) werten die DOCTYPE-Angabe der Datei aus. Kein DOCTYPE -> Sloppy Mode (damit bestehende Seiten nicht auseinanderbrechen). Ein "richtiger" DOCTYPE -> Standards Mode (der immer anzustreben ist).
Eine Übersicht darüber, welcher Browser wann wie schaltet, kriegst du hier (z.B.): http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html
- Sven Rautenberg
-
hi
Ich habe immer gedacht, IE wäre der Browser, der die Standards am besten interpretiert. Hat sich das mit Netscape 6 und 7 geändert?
bei CSS (und da geht es hier ja gerade) ist der MSIE so um Rang 8 herum...:
Mozilla 1.1
Netscape 7PR1
konqueror 3.x
Netscape 6.2
Netscape 6.1
konqueror 2.x
Opera 6.x
Opera 5.x
MacIE5.x
Netscape 6.0
MSIE6
..so müsste das passenRichtig. Bei manchen Linkzuständen war die Breite auf Standard gesetzt. Ich habe jetzt alles vereinheitlicht. Funktioniert.
bei mir wandert's immer noch. Mein Rat: nur die border-color beim hover ändern - vorher dann den Border transparent.
Wo kann man denn die Modi von IE einstellen? Ehrlich gesagt, davon habe ich noch nie gehört. Das steht auch nicht in Selfhtml, oder?
einfach das <?xml...> oben weglassen. Ist ein Bug im IE, dass er einen DOCTYPE nur parst, wenn er wirklich in der erste Zeile steht.
Grüße aus Bleckede
Kai