Wayfinder example using images for normal, hover, active?

Hi. Can anyone point me to an example showing Wayfinder (and accompanying CSS) using separate "normal", hover and active images (no text) for a menu? Thanks in advance!

Hi,

There’s an example in the e-book in my sig (IIRC) showing an a CSS sprite menu. (BTW, Wayfinder itself doesn’t accomplish this. It’s all in your CSS - using text replacement - e.g. applying text-indent: -9999px; to your links )

cheers/k

Thanks for the reply, and for your awesome book, by the way.

I agree. I tried using your sprite example, but get different results for different browsers -- looks great with Firefox and Safari, but IE7 offsets each menu element downward from the previous element (about half the menu height, like stairs). So, I was hoping for a "full" example to look at.

hi,

looks great with Firefox and Safari, but IE7 offsets each menu element downward from the previous element (about half the menu height, like stairs)

say hello to IEs staircase-bug : http://haslayout.net/css/view?tut=Staircase-Bug

Beautiful! That did the trick. I had the "display:inline" in the wrong location.

Glad you got it sorted thanks to sharkbait

cheers/k

Thanks to you both. I do have one final question (which is still associated with this topic) so here goes:

Using background images in this fashion has one curious result -- printing doesn’t show the menu. Any suggestions for what alternate CSS (via @media print) might make sense to handle this?

That probably depends on the printer’s configuration. Printers are often configured to not print out background images or colors.

That is one reason why it’s not really such a good idea to be using background images for menus; another is that people using text-to-speech or other non-graphical browsers won’t be able to access your site. Depending on the purpose of the site and the country you’re in, it may even be illegal.

At least if the image is directly inserted it can have an alt attribute so that the screen-readers that blind people use can read it.

You could try putting menu text in a span and then making the span have display:none in the screen version of the .css, and having it display:block and skip the background in the print version of the .css.