[RESOLVED] Float in MSIE, margins & paddings overlooked

[turboraketti]

I get rendering problems with floating elements in MSIE. I have menu build up with a list, like this:
<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>
I want all li:s floating in the div, so I use this CSS (borders added in debug purpose):
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; }
In Firefox it looks as I expect it to look: test-iefloat-ff.png (http://natbyggarna.se/test-iefloat-ff.png) (or see attachment)

However, in MSIE (6 or 7) the margin-right of the ul and padding-right of div#menu is not considered in the rendering: test-iefloat-ie.png (http://natbyggarna.se/test-iefloat-ie.png) (or see attachment)

I tried li{display:inline} and extra wrapper divs (tips I found searching the web), but no luck. See my example page here (http://natbyggarna.se/test-iefloat.php).

Any help madly appreciated.

[Centauri]

Giving the <ul> HasLayout in IE seems to fix it :* html #first ul { height: 1%;}

[turboraketti]

Awesome. That did the trick. I'm so happy. Fanx!

If you read this thread, and like me haven't paid so much attention to IE hasLayout or the Holly Hack, I recommend the following reading, which I guarantee is worth your time:
http://www.satzansatz.de/cssd/onhavinglayout.html