Jag har en meny uppbyggd som en lista, typ:
Kod:
<div id=menu>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
...snip...
</ul>
<br clear=all />
</div>
Jag vill ha alla li flytande i div:en, så jag använder denna CSS (borders tillagda i debugsyfte):
Kod:
div#menu { margin: 10px auto; padding-right: 100px; width: 690px; border: 1px solid blue; }
ul { margin: 0; padding: 0; margin-right: 100px; border: 1px solid green; }
li { list-style: none; float: left; padding: 2px 30px; border: 1px solid red; }
Jag behöver ha utrymme till höger i div:en för en absolut positionerad bild, därav padding-right och/eller margin-right.
I Firefox ser det ur som förväntat:
Men i MSIE (både 6 & 7) verkar inte varken padding-right för div#menu eller margin-right för ul respekteras:
Jag får inte ordning på detta. Har surfat och hittat tipsen att wrappa med en extra div eller att li måste vara display:inline, men inget av detta har hjälpt. En testsida finns här: natbyggarna.se/test-iefloat.php och där jag använder det skarpt är: concreta.se
Några idéer?