WordPress & Webwork

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.

18 Reaktion(en)

  1. bibo

    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. Björn

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

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

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

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

  7. Mike

    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

  8. Perun

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

  9. Mike

    @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

  10. Stefan

    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.

  11. Danke

    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

  12. fabs

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

Die Kommentare in diesem Beitrag sind geschlossen.