Doppelter Margin-Wert

18 Kommentare

Heute ist mir wieder ein alter Bekannter über den Weg gelaufen: der doppelte Margin-Wert. Es handelt sich hierbei um einen CSS-Bug im Internet Explorer. Worum geht es? Weist man einem Div-Block die Eigenschaft float zu und gibt ihm gleichzeitig einen Margin-Wert (welches in gleicher Richtung zeigt), dann verdoppelt sich der Margin-Wert. Je nach Laune und Tagesform ist es entweder ein lästiger Bug oder ein nettes Feature der Firma Microsoft :twisted:. Hier ein Code-Beispiel:

#sidebar {
float: right;
margin-right: 25px; /* In IE wird daraus 50px */
width: 190px;
}

Eine mögliche Lösung des Problems:

#sidebar {
float: right;
margin-right: 25px;
display: inline; /* Umgeht das Problem */
width: 190px;
}

Weiterführende Infos: Positioniseverything.net.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

Über Vladimir

Vladimir Simović arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

Schlagwörter:

18 Kommentare

  1. Sehr schön. Und ich dachte schon, ich sei bekloppt. Teste ich gleich aus. Danke dafür…

  2. so ein zufall…
    genau mit sowas hatte ich heute zu kämpfen. in opera siehts super aus, dacht ich mir “schau s mal im IE an” und überall war so ein häßlicher weißer abstand…
    voll für n eimer.

  3. Wieder was gelernt. Danke. Ich hatte das Problem gerade gestern und habs einfach hingenommen und dem Blauen eben den halben Abstand gegeben. Aber interessant zu wissen, dass es eine Lösung dazu gibt.

  4. Dieser Fehler war mit bisher noch nicht bekannt. Auf meinen Seiten hatte ich bis jetzt immer nur mit dem Italic-Bug zu tun.

  5. […] Danke an Vladimir für die Lösung des “Rätsels”. […]

  8. So ein Zufall! Ich sah heute in deiner Kommentarvorschau einen Kommentar zu diesem schon älteren Beitrag. Genau wegen dieser Geschichte habe ich heute morgen ein Büschel grauer Haare mehr bekommen 😉

    Dein Blog ist wirklich ein Schatzkistchen, ich habe hier schon so gute Tipps gefunden 🙂

  9. Hallo Gabi,

    Dein Blog ist wirklich ein Schatzkistchen, ich habe hier schon so gute Tipps gefunden 🙂

    Dankeschön! Es freut mich immer wieder, wenn meine Tipps helfen.

  10. Diese Seite war zum Glück gleich der erste Treffer in Google und hat mir wahrscheinlich stundenlanges CSS-Gefrickel gespart… Danke!

  11. Hat mir sehr geholfen aber ich dachte display: inline; wird wom IE 5 nicht unterstützt!!! wie verhät es sich da? oder hat man da dieses Problem nicht!?
    Mike

  12. @Mike,
    display: inline; wird sehr wohl von IE 5.0x unterstüzt. Einzig bestimmte Angaben (wie z.B. padding) greifen nicht richtig bzw. garnicht. IE 5.5 hat auch nichtmal dieses Problem.

  13. @Perun
    Cool danke für die info! gillt das auch für margin angaben innerhalb eines elementes, welche mit display: inline; enthalten? ich habe nämlich das problem, dass der ie-mac den vertikalen margin nicht darstellt wo ich auch mit inline gearbeitet habe, um den horizontalen abstand richtig darzustellen.
    Mike

  15. Danke für den Tipp. Der Beitrag ist zwar etwas älter, aber noch immer aktuell. Jetzt hatte ich erstmals das Problem des doppelten margins auf einer Seite.

  17. Danke 🙂

    Ich würde mal sagen wir fliegen nach Amerika und spüren die Entwickler vom IE6 auf und jagen Sie anschließend durch die Straßen.

    Was ich nicht verstehe is das OpenSource Browser um Welten besser sind (vorallem in der W3C komformen Interpretation) als der MS Mist. Es gibt genügent soclher Ungereimtheiten. Padding ist auch so ein problemkind genauso wie das Schriftgrößen nicht in UNterelemente übernommen werden usw…..

    lg

  18. Ich habe das gleiche Problem und habe auch die Lösung mit dem display:inline versucht, allerdings wird mir dann der margin nicht mehr dargestellt und das Element einfach an den Rand geschoben. 🙁

Kommentare sind geschlossen.