1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

[CSS] IE6 rückt floatende Boxen zu weit ein - was tun?

Dieses Thema im Forum "Webmaster FAQ" wurde erstellt von Maik, 19. April 2008.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Maik

    Maik Gast

    IE6 rückt floatende Boxen zu weit ein - was tun?

    Die Ausgangssituation: In einem Elternblock sind zwei Spaltenblöcke eingebunden, die entsprechend ihrer Ausrichtung mit der float:left- bzw. float:right-Eigenschaft, sowie margin-left- bzw. margin-right-Eigenschaft ausgezeichnet sind.

    Der Außenabstand der beiden Boxen soll zum benachbarten Rahmen des Elternelements 50 Pixel betragen.

    Markup:

    Code (Text):
    1.  
    2. <div id="wrapper" class="clearfix">
    3.      <div id="leftBox">leftBox</div>
    4.      <div id="rightBox">rightBox</div>
    5. </div>
    6.  
    Stylesheet:

    Code (Text):
    1.  
    2. #wrapper {
    3. width:650px;
    4. margin:0 auto;
    5. border:1px solid #000;
    6. }
    7.  
    8. #leftBox {
    9. width:250px;
    10. height:250px;
    11. float:left;
    12. margin-left:50px;
    13. background:#dfdfdf;
    14. }
    15.  
    16. #rightBox {
    17. width:250px;
    18. height:250px;
    19. float:right;
    20. margin-right:50px;
    21. background:#cfcfcf;
    22. }
    23.  
    24. .clearfix:after {
    25. content:".";
    26. display:block;
    27. height:0;
    28. clear:both;
    29. visibility:hidden;
    30. }
    31.  
    32. .clearfix {display:inline-block;}
    33.  
    34. /* Hides from IE-mac \*/
    35. * html .clearfix {height:1%;}
    36. .clearfix {display:block;}
    37. /* End hide from IE-mac */
    38.  
    Das Ergebnis in den Browsern:

    float-container_modern-browser.jpg (Firefox, IE7, Netscape, Opera, Safari, usw.)

    float-container_ie6.jpg (IE6)

    Anhand des angelegten Maßbandes erkennt man deutlich, dass der IE6 die Außenabstände der beiden Boxen verdoppelt. Aus diesem Grund spricht man hier vom "IE Doubled Float-Margin Bug".

    Lösung:

    Die betroffenen Boxen zusätzlich mit display:inline auszeichnen:

    Code (Text):
    1.  
    2. #leftBox {
    3. width:250px;
    4. height:250px;
    5. float:left;
    6. margin-left:50px;
    7. background:#dfdfdf;
    8. [B]display:inline;[/B]
    9. }
    10.  
    11. #rightBox {
    12. width:250px;
    13. height:250px;
    14. float:right;
    15. margin-right:50px;
    16. background:#cfcfcf;
    17. [B]display:inline;[/B]
    18. }
    19.  

    mfg Maik
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen