Horizontal li in IE7 shows as vertical

Question

I have tried a number of tweaks and fixes from SO along with some other posts found on the net but I still can not get this list to show horizontal in IE7.

I have checked the html and css with the validator and it is valid, no errors.

I have stripped out virtually everything not related to the ul/li here http://dogmatic69.com/tmp/test.html

Any help greatly appreciated, thanks.

Answer 1

Unless you need to explicitly float the list items, don't. Use display: inline;

Answer 2

IE 6 & 7 dont like display:inline-block; for some reason.

Try using the code below. Please note it will probably break it in modern browsers so make use you put it in your IE 6/7 only CSS files.

<!--[if IE 7]>
    <style> li { display: inline-block; display:block; } </style>
<![endif]-->