Peruns Weblog - Webwork und Internet

Ist das private Weblog von Vladimir Simovic mit Berichten zum Thema Webwork und Internet. Ich wohne in Köln und arbeite als freier Webworker, Blogger und Autor.

Doppelter Margin-Wert

Perun am 12. September 2005 um 19:37 Uhr
Xtopia

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.

Verwandte Beiträge

Kategorien:
HTML-CSS
Tags:
 
Beitrag:
Trackback-Adresse und die Druckvorschau
Rivva:
Was sagen die Anderen dazu?
Kommentare:
Kommentare verfolgen oder ein Kommentar abgeben

«« Zum vorherigen Beitrag — Zum nächsten Beitrag »»

17 Kommentare »»

  1. 1. – semmel

    Kommentar vom 12. September 2005 um 20:15

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

  2. 2. – bibo

    Kommentar vom 13. September 2005 um 17:13

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

    Kommentar vom 13. September 2005 um 19:29

    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. 4. – Horst Scheuer

    Kommentar vom 13. September 2005 um 21:52

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

  5. 5. – Th(g)eBlog » Blog Archive » CSS: IE-Bug mit Margin

    Pingback vom 11. Oktober 2005 um 09:59

    [...] Danke an Vladimir für die Lösung des "Rätsels". [...]

  6. 6. – alex

    Kommentar vom 17. November 2005 um 13:02

    Microsoft? Also mein Firefox hatte heute das gleiche Probem.

  7. 7. – alex

    Kommentar vom 17. November 2005 um 14:35

    ein ähnliches! Hatte aber andere Ursachen, sorry. :oops:

  8. 8. – Gabi

    Kommentar vom 18. November 2005 um 14:31

    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 :smile:

  9. 9. – Perun

    Kommentar vom 18. November 2005 um 18:32

    Hallo Gabi,

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

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

  10. 10. – Dennis

    Kommentar vom 27. Dezember 2005 um 00:11

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

  11. 11. – Mike

    Kommentar vom 02. März 2006 um 11: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. 12. – Perun

    Kommentar vom 02. März 2006 um 11:17

    @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. 13. – Mike

    Kommentar vom 04. März 2006 um 13:05

    @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

  14. 14. – Yalcin

    Kommentar vom 12. Juni 2007 um 12:32

    Vielen Dank für die Information! Ich dachte schon, ich spinne :-)

  15. 15. – Stefan

    Kommentar vom 26. November 2007 um 14:52

    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.

  16. 16. – Lakai

    Kommentar vom 29. März 2008 um 13:48

    Vielen Dank!
    War schon am verzweifeln…

  17. 17. – Danke

    Kommentar vom 17. Mai 2008 um 09:38

    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

Einen Kommentar hinterlassen

XHTML (folgende Tags sind erlaubt): <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . Kommentar-Vorschau ist aktiviert (Javascript wird benötigt).

Code-Beispiele: damit die Code-Beispiele richtig angezeigt werden müssen die Sonderzeichen maskiert werden (z. B. < zu &lt;).

Live-Vorschau: