Webmaster Forum / HTML, CSS, Scripts / CSS / December 2004

was trying to update my horizontal nav menu with a background image.  i
tried everything and couldn't get it to work.

while searching for solutions, i came across this tutorial:

http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml

i thought it was pretty nice, so i tried the code exactly as they had
it listed.

everything worked great...  except the background give didn't show up
so my box background is plain old vanilla white.

UUUUGGGGH!

does anybody have a clue why my background isn't showing up in either
firefox 1.0 or ie 6.0?  i saved the gif and put it into mymain folder.

tia...

-------------------------------------------

here's the html i'm using:

<div id="nav-menu">
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>

here's the css:

#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#nav-menu li
{
float: left;
margin: 0 0.15em;
padding: 0;
text-align: center
}

#nav-menu li a
{
background: url(hmenu.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

/* Commented backslash hack hides rule from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End IE5-Mac hack */

#nav-menu
{
width:30em
}