IE7 Not Floating List Elements in Navbar, When No Height is Specified

Question

I made a navbar and it works perfectly in all browsers except IE7. Below is a link to an example. Here is a quick explanation of what Im trying to accomplish. The navbar is wrapped in a ul and floated each list item to the left this works perfectly in all browsers except IE7 in which case each li item is on its own line and all but the first one is hidden, because the ul has a set height. I tried everything I could think of (even changing display modes) and nothing worked> I know it might be easier to use specific widths but I just think that there has got to be something simpler. Thanks

Check out the sample below:
http://jsfiddle.net/XV9nQ/

Answer 1

Try this: http://jsfiddle.net/moeishaa/W43w5/

I removed float:left and the height from the ul. Added a new css class clearfix to the ul. When you are floating things, add the clearfix class to the parent and you should be set. You dont need to specify a height