Doppelter Margin-Wert

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.

Diesen Blogartikel teilen:

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.

Verwandte Beiträge

18 Gedanken zu „Doppelter Margin-Wert“

  1. 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.

  2. 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.

  3. Pingback: Th(g)eBlog » Blog Archive » CSS: IE-Bug mit Margin
  4. 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 🙂

  5. 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.

  6. 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

  7. @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.

  8. @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

  9. 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

  10. 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.