Problems in Firefox & Mozilla with this menu

Having a few teething troubles with this nav bar in Firefox & Mozilla. It uses a three tier background graphic, and only seems to appear in FF & Moz if you scroll the page or refresh it. Anyone have any problems with this before? Its probably something simple but i seem to of exhausted my knowledge on it.
Heres the code...

 #navbar{
position: relative;
/*background-image:url(images/background/nav.jpg);*/
background-repeat:repeat-x;
height:51px! important;
width: 727px;
clear: both;
voice-family: "\"}\""; 
 voice-family:inherit;
}

#nav {
position: absolute;
width: 727px;
height: 51px;
background: url(images/background/nav.jpg) repeat-x 0 0;
margin: 0;
padding: 0;
display: inline;
list-style: none;
overflow: hidden;
}

#nav li{
margin: 0;
padding: 0;
list-style-type: none;
display: inline;
}

#nav a {
float: left;
border: none;
margin: 0 0 0 8px;
padding: 51px 0 0 0;
overflow: hidden;
height: 0px!important;
height /**/: 51px;
}

#nav a:hover, #nav a:active {
background-position: 0 -51px;
}

#nav a.selected {
background-position: 0 -102px;
}

#navabout a {
margin-left: 170px;
width: 69px;
background: url(images/buttons/about.gif) no-repeat 0 0;
}

#navproj a {
width: 71px;
background: url(images/buttons/projects.gif) no-repeat 0 0;
}

#navmem a {
width: 69px;
background: url(images/buttons/members.gif) no-repeat 0 0;
}

#navcase a {
width: 90px;
background: url(images/buttons/case.gif) no-repeat 0 0;
}

#navcon a {
width: 85px;
background: url(images/buttons/contact.gif) no-repeat 0 0;
}

#navlogin a {
width: 56px;
background: url(images/buttons/login.gif) no-repeat 0 0;
}

#navhome a {
width: 53px;
background: url(images/buttons/home.gif) no-repeat 0 0;
}
</style>
<title>Monkey Nuts</title>
</head>

<body>
<div id="navbar">
<ul id="nav">
<li id="navabout"><a href="#">About Us</a></li>
<li id="navproj"><a href="#">Projects</a></li>
<li id="navmem"><a href="#">Members</a></li>
<li id="navcase"><a href="#">Case Studies</a></li>
<li id="navcon"><a href="#">Contact Us</a></li>
<li id="navlogin"><a href="#">Login</a></li>
<li id="navhome"><a href="#">Home</a></li>

</ul>
</div>
</body>
</html>

Thanks in advance

Problems in Firefox & Mozilla with this menu

backgorund image problem

mesh606

SuzyUK

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week