Unterschiede Mozilla vs. IE

[Christopher Böhm]

Hallo,
also ich bin ja irgendwie am verzweifeln. Versuche meine Seite so zu gestalten, das sie unter dem IE genauso aussieht wie unter Mozilla. Nur habe ich jetzt 2 große Probleme entdeckt.

1. <div> & <a>
   Wenn ich ein <DIV> mit 130px width habe und darin enthalten ein <A> mit 120px als width, dann kann ich mit dem <A:HOVER> dafür sorgen das beim Maus drüber fahren sich die gesamte Zeile über 120px umfärbt, ähnlich den Windows-Menüs. Problem ist jetzt unter Mozilla sieht das sehr gut aus, d.h. 130px breiter Rahmen und in der Mitte, mittig, ein 120px breiter Link der die Hintergrundfarbe auf der ganzen Länge von 120px ändert beim drüber ziehen. Beim IE dagegen ganz anders, und zwar macht der den Link zu lang. D.h. ich habe eine <DIV> mit 130px, darin enthalten dann ein <A> mit 120px, nur wenn ich die Seite anschaue zeigt mir der IE den Link viel zu lange an, d.h. er geht rechts über den Rand des <DIV> Tags raus, obwohl er eigentlich kleiner ist!
   Das gleiche Problem habe ich anderer Stelle auch, habe ein 500px breites <div> und darin einen 500px breiten <a> ... so das außen ein Rahmen ist (div) und darin, in der mitte ein 500px breiter (farbiger Hintergrund) <a> ... in Mozilla wunderbar, aber im IE geht der <a> etwa 4px weit über den rechten Rand des <divs> hinaus ....
   Woran kann das liegen das beide Browser diese Informationen ganz anders verarbeiten?????
2. <fieldset>
   Also ich benutze in meinen Formularen <fieldset>, jeweils ein <fieldset> und darin jeweils ein <input ...> ... diese formatiere ich über CSS. Und zwar so, das sie unten einen Außenabstand von 20px haben. Wenn ich mir das ganze jetzt in Mozilla anschaue ist es wieder super hübsch, Man sieht das <fieldset> und darin, schön mittag (mit ein bißchen Abstand zu den Rändern oben, unten und links), dann 20px Abstand und das nächste <fieldset>.
   Nicht so der IE, schaue ich mir das ganze hier an sieht es schrecklich aus. Erstmal beachtet der IE die Außenabstände gar nicht! D.h. die ganzen <fieldset>'s hängen direkt untereinander, ohne Abstand zueinander. Das nächste Problem ist die Lage der <input ...> innerhalb eines <fieldset>. Waren die Eingabefelder beim Mozilla noch schön mittig und zentriert innerhalb des <fieldset> so sieht das beim IE anders aus, hier "kleben" die Eingabefelder <input ...> direkt am Rand des <fieldset> links unten, kein Abnstand zum Rahmen (Linie) des <fieldset> sondern direkt dran, so das das richtig scheiße aussieht.
   Wie kann man das ändern und woran liegt das???

Also wie man sieht, sehr seltsam, Deswegen eine allgemeine Frage. Welcher der beiden Browser ünerstützt CSS jetzt besser? Oder anders gefragt, welcher der beiden unterstützt CSS so wie "ofiziell" vorgesehen? Wo kann ich den nachlesen welche Befehle von welchem Browser wie unterstützt werden? Und wie sollte ich CSS den jetzt benutzen?

[Gunnar Bittersmann]

Hi Christopher,

Versuche meine Seite so zu gestalten, das sie unter dem IE genauso aussieht wie unter Mozilla.

Wozu? Wichtig ist, dass die Seite in allen Browsern ansprechend aussieht und benutzbar ist, nicht dass sie pixelgenau gleich ist. Was auch gar nicht geht: Du kennst weder Fenstergröße noch Schriftgröße beim Nutzer.

Erstelle lieber ein anpassungsfähiges Layout. Breitenangaben nicht in px, sondern in em (also abhängig von der Schriftgröße) sind da vorteilhaft.

Wenn ich ein <DIV> mit 130px width habe und darin enthalten ein <A> mit 120px als width,

Wie willst du dem a-Element gesagt haben, es solle 120px breit sein?

Live long and prosper,
Gunnar

[Christopher Böhm]

Wie willst du dem a-Element gesagt haben, es solle 120px breit sein?

Hmm, also das war kein Problem, vorallem muss(!) ich das sogar machen damit unter Mozilla die Funktion <a:hover> richtig funktioniert. Also weiß nicht was du damit für ein Problem hast ;-)

[Gunnar Bittersmann]

Hi Christopher,

Wie willst du dem a-Element gesagt haben, es solle 120px breit sein?

Hmm, also das war kein Problem,

Doch, da ist eins. Vielleicht hast du es nur nicht erkannt. Also wie hast du es gemacht?

vorallem muss(!) ich das sogar machen damit unter Mozilla […]

Wie bitte?

<a:hover>

Wie bitte?

Live long and prosper,
Gunnar

[Cyx23]

Hallo,

Also wie man sieht, sehr seltsam, Deswegen eine allgemeine Frage. Welcher der beiden Browser ünerstützt CSS jetzt besser? Oder anders gefragt, welcher der beiden unterstützt CSS so wie "ofiziell" vorgesehen? Wo kann ich den nachlesen welche Befehle von welchem Browser wie unterstützt werden? Und wie sollte ich CSS den jetzt benutzen?

Mozilla eignet sich schon eher als "Referenz", allerdindgs ist natürlich der IE wegen seiner
hohen Verbreitung auch stimmig zu bedienen.

Als Lösung ist derzeit m.E. grundsätzlich eine Browserweiche für externe Stylesheets, für die IE
per Condtional Comment, empfehlenswert.
Aber in reduzierter Form, das o.g. Beispiel mit weitergehender Zuweisung vieler Stylesheets auch
noch per CSS-Hacks soll so eher als Demo denn als konkrete Vorlage dienen.
Die einfachste Variante wäre wohl ein normales Stylesheet für alle (oder alle neueren) Browser,
auch für die IE, einzubinden, und dann per conditional comment ein zusätzliches ergänzendes
Stylesheet für die IEs.

Grüsse

Cyx23

[Ingo Turski]

Hi,

habe ein 500px breites <div> und darin einen 500px breiten <a> ... so das außen ein Rahmen ist (div) und darin, in der mitte ein 500px breiter (farbiger Hintergrund) <a> ... in Mozilla wunderbar, aber im IE geht der <a> etwa 4px weit über den rechten Rand des <divs> hinaus ....

mehr hättest Du eigentlich nicht schreiben müssen. Herzlichen Glückwunsch - Du hast den Box-Modell-Fehler des Internet Explorers entdeckt, leider aber noch nicht in der CSS-Dokumentation danach gesucht.

Also ich benutze in meinen Formularen <fieldset>, jeweils ein <fieldset> und darin jeweils ein <input ...> ... diese formatiere ich über CSS. Und zwar so, das sie unten einen Außenabstand von 20px haben.

Hier wäre es wichtig, genauer zu sagen oder besser zu zeigen, wie Du das formatiert hast.

freundliche Grüße
Ingo