Getting a horizontal list in IE7

[KeredDrahcir]

I've got a problem. I need to horizntal menu so I'm using a list to do it. Everything was working fine then I decided to have a look at it in IE8 which was still fine (almost). However when I switched on compatability mode each list item was displayed on a new line. I have found one fix for it but it insn't subitable.
There are enough of my target audience using IE7 to warrent fixing it.

.mainmenu{
    clear: both;
    height: 47px;
    margin: 0;
    width: 980px;
}
.mainmenu ul{
    font-family: arial rounded MT bold, arial, verdana, georgia, tahoma,  sans-serif;
    list-style: none;
    margin: 0;
    padding-left: 0;
    text-align:left;
}
.mainmenu li{
    display: inline-block;
    margin: 5px 0 0;
    padding: 0;
    z-index:1000;
    height: 42px;
}
.mainmenu li a{
    display: inline-block;
    font-size: 11pt;
    font-weight: bold;
    height: 31px;
    padding: 11px 21px 0;
    text-decoration: none;
} 
.mainmenu li a:hover{
    text-decoration: underline;
}
 

The text and background colours have been removed since they won't have any effect.

<div class="mainmenu">
  <ul>
    <li><a href="link">Home</a></li>
    <li>Current page</li>
    <li><a href="link">Page</a></li>
    <li><a href="link">Page</a></li>
    <li><a href="link">Page</a></li>
    <li><a href="link">Page</a></li>
    <li><a href="link">Page</a></li>
    <li><a href="link">Page</a></li>
  </ul>
</div>

The only way I could fix it was to put float: left into the .mainmenu li class but that meant the menu didn't use full use of the line which is important for the layout.
Is there a solution for this that doesn't use float left. I'm willing to use JavaScript if needed.