CSS navigation focus background-image does not work

advertisements

I've looked through several of the questions on stackoverflow and still haven't found the answer...a Google searched was useless as well....

Here's my CSS:

#nav {
    text-align:center;
    display: block;
    background-image: url(lines.png);
    background-repeat: repeat-x;
    font-family: Gabrielle;
    text-decoration: none;
}

The most common question asked is whether or not the file is in the correct folder - I assure you it is. This site is not live, I'm only working from local files thus far.

Here's the accompanying HTML:

<div id="nav">
 <ul>
    <li><a href="kitchen.html">Kitchen &amp; Bath</a></li>
    <li><img src="nav-bullet.png"></li>
    <li><a href="interior.html">Interior Design</a></li>
    <li><img src="nav-bullet.png"></li>
    <li><a href="graphic.html">Graphic Design</a></li>
    <li><img src="nav-bullet.png"></li>
    <li><a href="cad.html">Auto CAD</a></li>
    <li><img src="nav-bullet.png"></li>
    <li><a href="modeling.html">3D Modeling</a></li>
</ul>

In case that's helpful somehow.

I'm trying to make "accent lines" on either side of my navigation, and I'm not sure if I'm going about it the right way. Here's a link to the site that "inspired" me.... You'll see that on either side of their navigation there are the elegant little lines. Those are what I'm trying to create.

http://www.tinkeringmonkey.com/

As I said, perhaps I'm going about it the wrong way. Any suggestions to either make the existing code work, or suggestions for an improved way to go about doing this would be greatly appreciated.


You must specify a height for nav. Also a good idea to specify a line-height also so that the text within the ul is vertically centered.

#nav {
    text-align:center;
    display: block;
    background-image: url(lines.png);
    background-repeat: repeat-x;
    font-family: Gabrielle;
    text-decoration: none;
    height: 20px;
    line-height: 20px;
}