Firefox/MSIE issues

[thomvincent]

I have building a small menu for a blog site. I have a list of ten items in a box which will be 'liquid'.

The CSS is as follows.


.menu {
float: right;
width: 22%;
margin-top: 0em;
margin-left: 0.5em;
margin-right: 0em;
margin-bottom: 0.5em;
padding: 0em;
background: #eeeeee;
}
.menu ul {
margin: 0em;
padding: 0em;
list-style-type: none;
}
.menu li {
margin: 0em;
float: left;
padding-left: 0.2em;
padding-right: 0.2em;
padding-top: 0em;
padding-bottom: 0.2em;
background: #eeeeee;
text-align: left;
width: auto;
}

Now in Firefox this works a treat. It all fits in neatly and more importanly it automatically linebreaks a li element if it cant fit width ways. MSIE however bunches the li into a horrible little box which in turn messes up the rest of the menu as per the example below.

http://www.thomvincent.com/css_browser.jpg

Does anyone know any extra CSS or HTML that can fix this problem? Apart from that everything else works in both.