Firefox/MSIE issues

programming web dev
1

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.

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