Text in front of sprite

HTML & CSS
1

Can’t figure out how to get the text to go behind the menu sprite (left sidebar nav) on the <span><em> (active page) on these menu pages (lunch, dinner, brunch): charlotteswebservices.com/temp/http-stoneyknob/sustenance/brunch.html

Also, wondering if you have a jquery suggestion for this scroller: charlotteswebservices.com/temp/http-stoneyknob/sustenance/images/scroller-capture.jpg

Thanks so much!

2

Simply add “text-indent -9999px” as a property for your anchor element and the text will be pulled of the left side of the page but still visible for screen readers. As for the scrollbar take your pick, there are quite a few plugins for custom scrollbars.

3

Thanks Chris! For the active pages I don’t use an a link:

<li class="nav2"><span>sustenance<em></em></span></li>

I thought I could use the same method as the top nav. See the code;

#nav li em {left:0 top:0;}

On menu/leftsidebar nav (nav in question) it works fine (text is under sprite) on the non-active pages even on the hover. It’s just the active page that it’s not working.

Which element would I add text-indent -9999px to?

4

Because you have multiple elements that change based on where you are within the site it would be easier to just add the text-indent property to the LI selector as it will remove the text no matter what element it exists within.

5

Got it. It’s working. Added it to the wrong nav first. Thanks Chris!

6

Got it!

7

I just tried it using the link you posted above and it worked fine for me, which browser are you testing it in?

EDIT: Just noticed you fixed it :slight_smile:

8

Thanks so much!

9

No problem

10

Hi Karen,
I would not use text-indent to hide the text. By doing that users with “Images Off” loose the ability to navigate since there is no visible replacement text.

The empty element for the sprite image is what I normally call the sandbag. It gets set as position:absolute; and when comes after your text it naturally layers above it since it is a positioned element lower in the source order.

Here is a simple example of a Sprite Nav with Replacement Text, just view the page source for complete code structure.

I also remember Paul writing a detailed example for you in one of your older threads, have a look through it as well since it gives a better explanation of how to structure the html/css.
http://www.pmob.co.uk/temp/sculleynav.htm

EDIT:
Keep in mind that you can reduce the amount of BG positions by setting a negative margin on the sandbag for hover/focus. The first link I gave uses that method.

11

I use Paul’s examples for my sprites so I’ve gone over it quite a bit. I don’t get why it works on the top nav but not the bottom. I’ll look yours over.

12

You have the html wrong on the page you linked to.

You have this -


<li class="menu3"><span>[COLOR=#ff0000]<em>brunch</em>[/COLOR]</span></li>

When it should be this -


<li class="menu3"><span>brunch[COLOR=#006400]<em></em>[/COLOR]</span></li>

The sandbag needs to come after the text and it needs to be empty. It looks like there is a stray closing anchor tag in your code also.

13

Great call! Now it’s working w/o the text-indent. Thanks so much!

I’d like to make the top and bottom blue tabs with very small text in them deeper so that when users make text size bigger the text dictates the height so it doesn’t break the layout. Tried setting a min-height but didn’t seem to work. Thanks much!