Question

I am trying to practice image replacement techniques, primarily for navigation purposes. I can’t seem to figure out why it’s not working. The hover works, however the default menu item does not. I’m pretty sure things are written correctly.

http://lrroberts0122.github.com/DWS/practical/index.html

Here’s the HTML fo the Navigation:

<ul id="nav">
    <li id="process"><a href="index.html" id="active">Our Process</a></li>
    <li id="function"><a href="function.html">Bio-Built Function</a></li>
    <li id="future"><a href="future.html">The Future</a></li>
    <li id="engage"><a href="engage.html">Engage Dio</a></li>
</ul>

Here’s my CSS for the Navigation:

#nav {
    list-style: none;
    width: 244px;
    height: 124px;
    overflow: hidden;
    }

#nav li {
    float: left;
    }

#nav li a {
    width: 244px;
    height: 30px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    background: url('../img/bg_nav.png');
    }

#process {
    background-position: 0 0;
    }

#process:hover {
    background-position: -244px 0;
    }

#function {
    background-position: 0 -31px;
    }

#function:hover {
    background-position: -244px -31px;
    }

#future {
    background-position: 0 -60px;
    }

#future:hover {
    background-position: -244px -62px;
    }

#engage {
    background-position: 0 -90px;
    }

#engage:hover {
    background-position: -244px -93px;
    }

Answer 1

First, one of the selectors you wrote there isn’t matching with what I see on the website: #nav li a is #nav li on your website.

Second, you need to be careful about the CSS selector specificity:

#nav li

will overrule:

#process

but:

#nav #process

won’t be overruled.

You can find a very good article about specificity here: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/