Nav Disappeared

[ChroniX]

I've been working on a site and just can't get the main navigation to work in IE. It works find in Firefox and Safari, but IE pushes it to the left, or makes the links disappear completely. I'm on a Mac so had to preview it (http://radiosunderland.co.uk/beta/index_REPAIR.html) using NetRenderer (http://ipinfo.info/netrenderer/).

The CSS for the menu is below. Can anyone work it out?


.Header-Nav2 {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
width: 380px;
float: right;
background-image: url(images/nav.jpg);
padding-left: 10px;
padding-right: 10px;
background-repeat: no-repeat;
text-align: left;
}
.Header-Nav2 ul{
margin : 0;
white-space : nowrap;
color : White;
padding-top: 8px;
padding-right: 5px;
padding-bottom: 8px;
padding-left: 5px;
}
.Header-Nav2 ul li{
display : inline;
}
.Header-Nav2 ul li a{
padding-left : 5px;
padding-right : 5px;
color : #CCCCCC;
text-decoration : none;
padding-top: 8px;
padding-bottom: 8px;
}
.Header-Nav2 ul li a:hover{
color : #FFFFFF;
background-image: url(images/nav-on.jpg);
background-repeat: repeat-x;
}

[jscheuer1]

First of all, if you remove the linked stylesheet, the nav renders in IE. Or if you remove the on page stylesheet, the nav renders. This means that it is a combination of the styles in the linked stylesheet and the on page stylesheet that is causing the problem. I found that if I made the padding here:


.Header-Nav2 ul li a{
padding-left : 4px;
padding-right : 4px;
color : #CCCCCC;
text-decoration : none;
padding-top: 8px;
padding-bottom: 8px;
}

4px, as shown, instead of 5px, that also made the nav render in IE. It was a little off though.

If I left it at 5px though, and added an inline style here:


<li><a href="/index.php" style="padding-right:0;">Fundraising</a>

all seemed well.