The Underscore Archives

OK, classic problem. I have a pretty menu which is a <ul> covered by one big
image (even the rollovers are part of the image - the background-position
gets altered on a:hover). As with just about any image replacement, you get
no menu at all if CSS is on but images are off (since the link text is
margin-left:-999em so as to hide it).

3 things I could do:

1. Don't worry - this problem is so common people browsing like that are
likely to have a crap time of it everywhere, at least until CSS3 is widely
supported.
2. Place a duplicate of the nav links list in a low z-index layer underneath
the menu image, so that people without images on can see it. Would confuse
screen readers and IE5 Mac people.
3. Use a low z-index layer as per (2), but instead of a duplicate menu just
put a warning in saying "there's a menu here, turn images on". Again, screen
readers and IE5 Mac are going to go "eh?".

Or is there a fourth option? Problem is, I can't see any way to hide the
link text under the image, since the image itself is a background-image to
the <a>s (unlike a header image, where you don't have to worry about a:hover
states).

It's a very visual site trying to sell textiles and the like, so it's not
going to be much use with images off *anyway* :) </ducks>

Oliver.