[turboraketti]

Jag har en meny uppbyggd som en lista, typ:

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

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?