pep78: IE zerschießt mal wieder DIV-Layout

Hallo,

Firefox, Opera und Netscape zeigen das Layout richtig an,
nur der IE zerschießt es mal wieder ;(

So muss es richtig aussehen:

http://www.imageuploader.de/p/2c86409600d6183583b7a86173abf537.png

Der IE macht aber zwischen den linken und rechten Buttons
nicht nur 3 Pixel sondern 6 Pixel Abstand, demzufolge passt
es nicht mehr ins große DIV rein und wird zerschossen
dargestellt.

Wenn man die Angabe  margin-right:3px; /* abstand */
rausnimmt, wird es im IE richtig dargestellt, bei den
anderen Browsern kleben dann aber die Buttons zusammen.

Weiß jemand wie man diesen "Bug" fixen kann?

Danke!
pep78

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<style type=text/css>

div{

font-family:verdana;
 font-size:8pt;

}

.links{

width:90px;
 background:#f3d9d0;
 border:1px solid #8f0000;
 font-weight:bold;
 padding:2px;
 padding-left:5px;

margin-right:3px; /* abstand */

float:left;
 }

.rechts{

width:163px;
 background:#f3e9e0;
 border:1px solid #d29761;
 padding:2px;
 margin-bottom:3px;
 padding-left:5px;
 overflow:hidden;
 }

</style>
</head>
<body>

<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td style=width:468px;vertical-align:top>

<div style=width:185px;float:left;background:green>

Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>

</div>

<div style=width:274px;margin-left:188px>

<div class=links>99 pixel</div><div class=rechts>172 pixel</div>
 <div class=links>links</div><div class=rechts>rechts</div>
 <div class=links>links</div><div class=rechts>rechts</div>
 <div class=links>links</div><div class=rechts>rechts</div>
 <div class=links>links</div><div class=rechts>rechts</div>
 <div class=links>links</div><div class=rechts>rechts</div>

</div>
</td>
</tr>
</table>

</body>
</html>

  1. hi,

    Der IE macht aber zwischen den linken und rechten Buttons
    nicht nur 3 Pixel sondern 6 Pixel Abstand

    The IE Doubled Float-Margin Bug

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
  2. Hallo pep,
    »

    .rechts{

    width:163px;
    background:#f3e9e0;
    border:1px solid #d29761;
    padding:2px;
    margin-bottom:3px;
    padding-left:5px;
    overflow:hidden;
    }

    gebe mal deiner .Rechts Klasse ein: float:left;
    mit. Auf meinen beiden Browsern IE und FF wird eigentlich nichts mehr zerschossen.

    mfg dennisb