medani-pixel
news
13
Feb 06

double-float margin Bug im Internet Explorer

Beim Erstellen einer Webseite ist mir heute ein schon seit Monaten bekannter Fehler passiert, der einiges an kostbarer Zeit gekostet hat: der ‚double-float margin bug‘ zu deutsch ‚doppelter Außenabstandsfehler‘. Ich entwickle Webseiten bequem im Firefox. Um die Browserkompatibilität zu testen, verwende ich den Internet Explorer 6 und siehe da, eine eigenartige Darstellung bereitet mir Kopfzerbrechen…

Beim Erstellen einer Webseite ist mir heute ein schon seit Monaten bekannter Fehler passiert, der einiges an kostbarer Zeit gekostet hat: der ‚double-float margin bug‘ zu deutsch ‚doppelter Außenabstandsfehler‘. Ich entwickle Webseiten bequem im Firefox. Um die Browserkompatibilität zu testen, verwende ich den Internet Explorer 6 und siehe da, eine eigenartige Darstellung bereitet mir Kopfzerbrechen…

Ich platziere ein left float in einem Kontainer und mache ein left margin im float, um es nach rechts, also von der linken Seite des Kontainers, zu entfernen. Man sollte meinen, das wäre ganz einfach. Nein, denn der Internet Explorer verdoppelt den Abstand!

Unten habe ich eine Graphik zur Verdeutlichung eingefügt: ein einfaches div, in dem sich meine left-floated div Box (orange) befindet. Die Box hat einen left margin von „100px“, dh. ein 100px-breiter Spalt ist zwischen linker Kante des Kontainers and der linken Kante meiner float box.

Float 100

 

Hier ein Auszug meines verwendeten CSS:

.meinefloatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*Der letzte Wert ist für den 100px left margin Abstand verantwortlich*/
}

Der exakt gleiche Code produziert im Internet Explorer6 einen Abstand von 200px!? Folgend eine Graphik, die die Ausgabe im Internet Explorer zeigt.

Float 200

 

Einige Google-Suchanfragen später dämmerte es mir – der IE benötigt unbedingt ein display: inline, um den Abstand korrekt darzustellen!

Und hier des Rätsels Lösung: (das CSS funktioniert im Firefox und Internet Explorer)

.meinefloatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;

display: inline;
/*funktioniert im FF und IE*/
}

Laut Aussage von Microsoft soll der double-float margin bug mit dem Internet Explorer 7 behoben sein. Doch wer garantiert uns Entwicklern die fehlerfreie Interpretation von CSS im Internet Explorer 7?

  1. MausBerlin Blog sagt:

    […] Bei medani.at habe ich endlich die Lösung für ein Problem gefunden, mit dem ich mich schon eine Weile beschäftigt habe, die unterschiedlichen Darstellungen im Internet Explorer und Firefox bei Verwendung von float: left. […]

  2. adler sagt:

    der bug hat mich einige nerven gekostet, diese seite mir weitere erspart …

  3. Marcel sagt:

    … für diese Beschreibung. Einen halben Tag habe ich gessesen und verzweifelt nach einem Fehler im Code gesucht.
    Das wars.

  4. Rieger sagt:

    Vielen Dank für den hilfreichen Hinweis.
    Hab nun 2 Stunden damit verbracht, den Fehler herauszufinden.
    Jetzt klappt’s.

  5. Gast sagt:

    danke, hat auch mir geholfen.

  6. Leaddanz sagt:

    Hi

    vielen 1000 Dank! Hat schon ca. 30 Minuten Suche hintermier, bis jetzt!

    Gruß

    Daniel

  7. Gast sagt:

    Tausend Dank. Der IE6 hat bei meinen Seiten zwar nur noch einen sehr (sehr) geringen Anteil (höchstens zweistellig) trotzdem hat mich dieser Bug sehr genervt. Bei mir ging es gerade mal um 10px aus denen 20px wurden. Mir war das bisher egal, da der größere Abstand sowieso in meinem Layout nicht weiter von Bedeutung war. Außerdem verdienen es Nutzer mit IE6 nicht anders als ein verhunztes Web zu sehen zu bekommen. Der Dinosaurier IE6 gehört in die Mottenkiste! Ist ja sogar ziemlich gefährlich mit dem Teil immer noch unterwegs zu sein.
    Also Aufruf: Internet Explorer 6 deinstallieren bzw. aktualisieren. Am besten gleich ein Upgrade auf Firefox 🙂

  8. G470 sagt:

    Tausend dank! der Bug hat mich auch einiges an Nerven gekostet. Hatte das gleiche Problem mit einem absolut positionierten div. margin-top wurde im ie und im firefox unterschiedlich interpretiert. Eigentlich eine simple Lösung aber darauf muss man erstmal kommen 🙂

  9. Gast sagt:

    danke danke danke 😉

  10. Bettiboh sagt:

    DANKE, DANKE, DAAAANKEEEE ! you made my day!

SENDEN
SENDEN