IE offset nav issue - html

Question

Across all browsers my navigation displays fine such as chrome, firefox, opera, safari.
But for some reason ie refuses to display correctly, and what makes it more frustrating is the fact it is literally 1px.
Which usually wouldn't bother me but it's in a place where it's obvious:
ie:
every other browser:
The code I'm using seems fine but here it is:
nav {
font-family: "Myriad Pro", Arial, sans-serif;
width: 280px;
height: 40px;
float: right;
font-size: 14px;
list-style: none;
clear: both;
position: relative;
top: 11px;
}
nav ul {
float: right;
margin: 0;
height: 40px;
width:240px
}
nav li {
display: inline;
}
nav li a {
color: #3BB9FF;
border-bottom: none;
padding: 12px 10px 11px 10px;
margin-left: -3px;
}
nav li a:hover{
color: #3BB9FF;
background-color: rgba(0, 0, 0, 0.3);
}
/********
Shows which page is selected
*/
nav li.selected {
display: inline;
}
nav li a.selected {
color: #3BB9FF;
background-color: rgba(200, 200, 200, 0.3);
border-top: 3px solid #fff;
}
I'm using the ie html5 shim from google trunk also.
Any simple fixes for this issue? I know it's not a big deal, it's just frustrating.

Answer 1

The CSS code on the menu is a bit weird. I think that's why IE is acting up.
Try the following adjustments:
nav li {
//display: inline;
float:left;
}
nav li a {
color: #3BB9FF;
border-bottom: none;
//padding: 12px 10px 11px 10px;
//margin-left: -3px;
display:block;
padding:10px;
}
Also check that the menu's width in IE is not enough.