CSS horizontal nav bar displaying diagonally in IE 5.5 - 7 - html

Question

The nav bar displays the correct way (horisontally) in IE 8 and above and every other browser. However only IE 5.5, 6 and 7 it displays diagonally. Can any body help?
.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}
.top-nav li {
margin-left: 220px;
}
.top-nav a {
display: block;
float: left;
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #FFF;
}
.top-nav a:hover {
background: #272727;
color: #18942f;
}
.top-nav .current_page_item a {
background: #252525;
color: #FFF;
}
HTML
<div class="top-nav">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li class="current_page_item"> Contact</li>
</ul>
</div>

Answer 1

Instead of floating each link, why not use display:inline on your li, display: inline works on IE 5.5
Also you need to remove "display: Block" as this is what is causing the links to move down.
.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}
.top-nav li {
display: inline;
}
.top-nav a {
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #aaa;
}​
http://jsfiddle.net/YJjya/
If you need to have your items be blocks, then use inline-block. Workaround to make it work on older version or IE can be found here: Work Around Inline Block
Also here is a handy piece of code to place immediately after your first head tag. It will only display is the user is using IE 7 or later and will tell them get their sh*t together and download a new browser. It is really not worth the time trying to make your site work on every IE version as you'll end up pulling your hair out to please a few people who obviously aren't internet savvy to begin with. As Mario said only 6% of the world still use IE6... But if you take a closer look at countries such as the US or UK that number is below 1%
After Head
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
CSS
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}

Answer 2

I've seen this problem many times. You want to float the LI and not the A that's inside the LI.
All you need to do is remove [float:left] from [.top-nav a] class and add it to the [.top-nav li] class. Your CSS would be:
.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}
.top-nav li {
margin-left: 220px;
float: left;
}
.top-nav a {
display: block;
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #FFF;
}
.top-nav a:hover {
background: #272727;
color: #18942f;
}
.top-nav .current_page_item a {
background: #252525;
color: #FFF;
}