Problems with CSS Image replacement

Based on CSS Sprites from A List Apart

[Patrickwc]

I am trying to utilize 2 images for a navigational menu. One that will always be seen, and the second directly behind the first as the a:hover. My problem is that I cannot seem to activate the final link entitled "Kathryn". Here is the CSS:

#nav-wrap {
width : 494px;
position: absolute;
left: 498px;
background-color : #a4b161;
height : 120px;
}

#menu {
position:relative;
width:494px;
height:120px;
background:transparent url(images/nav-norm.gif);
overflow:hidden;
margin:0 auto;
}
#menu ul {
margin:0;
padding:0;
}
#menu li {
list-style-type:none;
width:83px;
height:120px;
display:inline;
}
#menu a {
display:block;
float:left;
width:83px;
height:120px;
overflow:hidden;
text-decoration:none;
background:transparent url(images/nav-norm2.gif) no-repeat 494px 120px;}

#menu a#intro:hover {background-position: 0 0; }
#menu a#contact:hover {background-position: -83 0; }
#menu a#rss:hover {background-position: -166px 0; }
#menu a#maureen:hover {background-position: -249px 0; }
#menu a#patrick:hover {background-position: -332px 0; }
#menu a#kathryn:hover {background-position: -415px 0; }

Here is the HTML:

<div id="nav-wrap">
<div id="menu">
<ul>
<li><a id="intro" href="#" title="Home"></a></li>
<li><a id="contact" href="#" title="Contact Us"></a></li>
<li><a id="rss" href="#" title="Our Feeds"></a></li>
<li><a id="maureen" href="#" title="Maureens Home Page"></a></li>
<li><a id="patrick" href="#" title="Patricks Home Page"></a></li>
<li><a id="kathryn" href="#" title="Kathryns Page"></a></li>
</ul>
</div>
</div>

Here is a link to the test page so you can view what I have to date in action. Any assistance would be appreciated.

[edited by: SuzyUK at 8:04 pm (utc) on Oct. 14, 2006]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]

[penders]

My problem is that I cannot seem to activate the final link entitled "Kathryn"...

Can you not actually click on the link? Or is your rollover effect not working on that link?

#menu a { 
width:83px; 
... 
background:transparent url(images/nav-norm2.gif) no-repeat 494px 120px; 
}

I guess this is to make the background image out-of-sight initially. I would have said you only need to set this to 83px 0 to have the same effect since your link is 83px wide (0..82) - although this is not a problem.

I assume your nav-norm2.gif image is 498px x 120px (6 x 83px wide)?

[Patrickwc]

Penders,

Thanks for the reply! I apologize for the delay iin responding. To answer your question, the link is not active as I cannot click on it. It would be helpful for you to see but they do not allow links in this forum. If I understand correctly, you are saying to change the pixels configuration after no-repeat: to 83px, 0 rather than having it at 494px, 120px. Is this correct? The nav-norm2.gif is 494px by 120px.

[edited by: Patrickwc at 12:59 pm (utc) on Oct. 16, 2006]

[SuzyUK]

I think you'll find it's purely a math issue

you have 6 floated links @ 83px wide = 498px;

your menu has been given an explicit width of 494px;

therefore there is not enough room for the links to all appear side by side and that last one is likely "dropping" down below and subsequently hidden (as per your overflow rule).

make your menu 498px wide and see if that helps?

Suzy

[edited by: SuzyUK at 1:07 pm (utc) on Oct. 16, 2006]

[penders]

...If I understand correctly, you are saying to change the pixels configuration after no-repeat: to 83px, 0 rather than having it at 494px, 120px. Is this correct? The nav-norm2.gif is 494px by 120px.

Yep... although to be honest, changing it it "83px 0" won't actually make any difference, just a bit more sense IMO (since your image is 83px wide).

Why is your image not 498px wide, as opposed to 494px? (6 x 83px = 498px) or (415px + 83px = 498px)?

...the link is not active as I cannot click on it.

I think Suzy has hit the nail on the head!

[Patrickwc]

It was purely a math issue as Suzy mentioned. Changing the menu to 498px did the trick. Thanks to Pender and Suzy for assisting on this, I really appreciate it.