Am I Blind? ( CSS Rollover Menu )

I've been banging my head against the wall for a little bit here. I've been away from the Javascript Rollover scripts that I have used in the past, and have moved to css to give me Rollover effects. For some reason, I can't find the blip in my markup that is causing me problems.


THE PROBLEM: Everything works flawlessly besides the 5th ( or last ) menu item. (id="contact"). All of the positioned li elements seem to be in place, but the contact us button does not have the same Rollover effect as the other buttons. Is there something minuscule that I am looking over?

I appreciate all of the help on this topic.



XHTML:

<div id="header" >
<div id="top-navigation" style="margin-left:245px;">
<ul>
<li class="home"><a href="#">home</a></li>
<li class="order"><a href="#">order</a></li>
<li class="products"><a href="#">products</a></li>
<li class="faq"><a href="#">faq</a></li>
<li class="contact"><a href="http://www.google.com/">contact</a></li>
</ul>
</div>



CSS:



#top-navigation ul {
width: 506px;
height: 76px;
position: relative; /** Places image at the top of the page **/
background:url(images/topnav.gif) no-repeat 0 0;
list-style: none;
margin: 0;
padding: 0;

}
#top-navigation li {
display: inline;
}
#top-navigation li a:link, #top-navigation li a:visited {
border: none;
height: 76px; /** height of the button in active state **/
display: block;
position: absolute;
top: 0;
text-indent: -7000px; /** Removes li text from the screen **/
outline: none;
}
#top-navigation li.home a:link, #top-navigation li.home a:visited {
width:86px;
}
#top-navigation li.order a:link, #top-navigation li.order a:visited {
width:132px;
}
#top-navigation li.products a:link, #top-navigation li.products a:visited {
width:102px;
}
#top-navigation li.faq a:link, #top-navigation li.faq a:visited {
width:73px;
}

#top-navigation li.contact a:link, #top-navigation li.contact a:visited {
width:113px;
}


#top-navigation li.home a:link, #top-navigation li.home a:visited {
left: 0;
}
#top-navigation li.order a:link, #top-navigation li.order a:visited {
left: 86px /** how many px left of the first button i.e order **/
}
#top-navigation li.products a:link, #top-navigation li.products a:visited {
left: 218px /** how many px left of the first button i.e order **/
}
#top-navigation li.faq a:link, #top-navigation li.faq a:visited {
left: 320px /** how many px left of the first button i.e order **/
}

#top-navigation li.contact a:link, #top-navigation li.contact a:visited {
left: 393px /** how many px left of the first button i.e order **/
}


#top-navigation li.home a:hover {
background: url(images/topnav.gif) no-repeat 0 -76px;
}
#top-navigation li.order a:hover {
background: url(images/topnav.gif) no-repeat -86px -76px;
}
#top-navigation li.products a:hover {
background: url(images/topnav.gif) no-repeat -218px -76px;
}
#top-navigation li.faq a:hover {
background: url(images/topnav.gif) no-repeat -320px -76px;
}

#top-navigation li.contact a:hover {
background: url(images/topnav.gif) no-repeat -393x -76px;
}

 

There are quite a few things I don't like about this menu, as far as some of the techniques (check your page out without images and you'll notice you've got a mystery-meat menu!), however if you want to stick with it, the first thing you can do to search for bugs is to simplify the code you have. I'll do that for you.

<div id="header" >
<ul id="top-navigation">
<li class="home"><a href="#">home</a></li>
<li class="order"><a href="#">order</a></li>
<li class="products"><a href="#">products</a></li>
<li class="faq"><a href="#">faq</a></li>
<li class="contact"><a href="http://www.google.com/">contact</a></li>
</ul>

Code (markup):

Unless that div is holding some other bg image? Otherwise you don't need it, so why let it sit there and make it harder for you to bug-hunt?

#top-navigation {
width: 506px;
height: 76px;
position: relative; /** Places image at the top of the page **/
background:url(images/topnav.gif) no-repeat 0 0;
list-style: none;
margin: 0 0 0 245px;
padding: 0;

}
#top-navigation li {
display: inline;
}
#top-navigation li a {
border: none;
height: 76px; /** height of the button in active state **/
position: absolute;
top: 0; 
[b]left: 0;[/b] 
text-indent: -7000px; /** Removes li text from the screen **/
}
        #top-navigation li.home a {
          width:86px;
        }
        #top-navigation li.order a {
          width:132px;
           left: 86px; 
        }
        #top-navigation li.products a {
          width:102px;
          left: 218px;
        }
        #top-navigation li.faq a {
          width:73px;
          left: 320px;
        }
        #top-navigation li.contact a {
          width:113px;
          left: 393px
        }

#top-navigation li a:hover {
  background: url(images/topnav.gif) no-repeat 0 -76px;
}

        #top-navigation li.order a:hover {
          background-position: -86px -76px;
        }
        #top-navigation li.products a:hover {
          background-position: -218px -76px;
        }
        #top-navigation li.faq a:hover {
          background-position: -320px -76px;
        }
        #top-navigation li.contact a:hover {
          background-position: [b]-393x[/b] -76px;
        }

Code (markup):

Now it's a hair cleaner. And while rewriting that, I see a typo. Typos suck, don't they?
Your contact has a unit of "x" instead of "px".

But if you want to see a more accessible version of an image-replaced menu, you can look at these:
Kyle's practice page Kyle's design, my menu code
Lil'Bella's I forget who's page this was, someone with a really creepy avatar on CSSCreator : ) This one uses margins on the sides of the menu items to space them out, which is I think a bit unusual in these menus.
http://guisy.eu/ (ignore the nasty ugly <font> tags, those are NOT mine. Nor actually is a bunch of other code : (

What these pages have, at least the last two, that yours doesn't is, they do stuff on :focus (you just add :focus to where you have :hover and your menu will also work with the keyboard) and they do stuff without images.

Turn images off, and tab (or whatever you do in Opera) through the menu. Your users should always get feedback of where they are even if they're keyboarding instead of mousing, and even if there are no images.

So often you not only set a :focus event for the images, but you also style the text too, so it changes colour or gets underlined or something on :focus. And if you use Gilder-Levin image replacement (explained in the LilBella page), you are actually sitting your image on top of the menu text— this removes the problem of having the text indented off-screen. No images? no problem, cause there's the plain text sitting underneath for all to see.

The text-indent thing was started because people found they could hide the text from most people who have images on (regular sighted people with images and css on) while not hiding the text from screen readers or the googles (like display: none or Javascripted menus do). But the CSS-on and Images-off scenario isn't far-fetched, so it's usually inferior to any of the other image-replacement techniques.

Also, you're abso-posing your anchors, and for the way you're doing this menu, you don't have to. You could also float them. They'll stack alongside each other, and floats are blocks so you can still set a height and width on them. Not sure it really matters here, either works really, but it always seems somewhat brittle when you position everyone. What happens when text is enlarged? Floats would drop which is ugly but still readable/usable, at least if the menu's not a dropdown (doesn't look like one). Though yeah with these menus, they always die horrible deaths on text-enlarge anyway : )

Anyway, good luck with your menu.

 

Thanks for taking the time helping me out. Great resources also, thanks again.

 

The one I should have given you is this one:
http://jigsaw.w3.org/css-validator/

because validators are pretty good at catching typos. This one will not only catch "x" in place of "px" but it'll also catch missing semi-colons, unclosed brackets, and other stuff we always do somewhere.