Nagivation Bar invisible in IE7, partly invisible in Safari

[jobbogamer]

I have a Wordpress site set up with a navigation bar at the top. This navigation bar is created using an unordered list, using this code:

<div id="navmenu">
 <ul>
 <li><!--<a class="fake" href="#"></a>--></li>
 <li><a class="navhome" href="/"></a></li>
 <li><a class="navblog" href="/blog/"></a></li>
 <li><a class="navvideos" href="/videos/"></a></li>
 <li><a class="navabout" href="/about/"></a></li>
 </ul>
 </div>

The first in the list called 'fake' is set up because in Safari, the first in the list is always invisible. With it commented or not commented, IE7 still doesn’t display the whole navigation bar at all. When it's commented, Safari doesn’t display the 'fake' one, but does display the ones I want.

I don't know if I've made a mistake in the CSS, the code here as follows:

#navmenu
{
margin: 0 auto;
text-align: center;
min-width: 800px;
}

#navmenu ul
{
margin: 0;
padding: 0;
padding-top: 15px;
padding-bottom: 50px;
list-style-type: none;
list-style-image: none;
/*display: block;*/
}

#navmenu li
{
display: inline;
}

#navmenu ul li a
{
text-decoration: none;
padding: 13px 75px 20px 75px;
background: url('/wp-content/themes/Future Theme/images/NavigationBar.gif') no-repeat;
}

#navmenu a.navhome
{
background-position: 0px 0px;
margin-left: 0px;
}

#navmenu a.navhome:hover
{
background-position: 0px -51px;
}

#navmenu a.navblog
{
background-position: 0px -102px;
}

#navmenu a.navblog:hover
{
background-position: 0px -153px;
}

#navmenu a.navvideos
{
background-position: 0px -204px;
}

#navmenu a.navvideos:hover
{
background-position: 0px -255px;
}

#navmenu a.navabout
{
background-position: 0px -306px;
}

#navmenu a.navabout:hover
{
background-position: 0px -357px;
}

The site itself is [joshsunshine.me.uk...] and the navigation bar should be just below the header graphic.

Any help on how to get it to display at all in IE7, and if possible, a way to get Safari not to remove the first in the list, would be greatly appreciated.

Thanks in advance.

[alt131]

Hi jobbogamer,
and welcome to WebmasterWorld ;)

The link to the site will be snipped but I've tested the provided code and it works as expected.

A "fake" list item should not be required, and the visiblility issues suggest something else is influencing the display of the menu.

A first place to start is to make sure the html and css validate [validator.w3.org]. Keep a special look-out for elements that might not be closed, correct class names and files that can't be found.

If that doesn't solve the problem, try to narrow down the issue (as explained in the Guide to posting [webmasterworld.com]), and post back a bit more code.