Hello, I'm having trouble with my link CSS sprites in IE 6 and 7. They use one transparency-enabled gif as the background.

The problem is that they don't seem to appear at all. I have been using a screenshot service (litmus), so I can't tell what exactly is going on in IE, or where the links have gone, there seems to be no trace of them anywhere.

They work fine in Firefox 1.5+, IE8, and Opera.

Here is my CSS:

#menulinks {width:521px; clear: both; margin-left: 178px; height: 45px; vertical-align: top;}

#menulinks a:link, #menulinks a:visited 
{display: inline-block; width: 155px; height: 44px; 
text-align: left; margin-right: 1px; overflow: hidden; 
background: url(/assets/images/menu.gif) no-repeat; text-indent: -9999px; 
font-size: 0px; line-height: 0px; background-position: 0 0; vertical-align: top;}
#menulinks a:hover, #menulinks a:active, #menulinks a:focus {background-position: 0 -40px;}

(and so on for the different menu items)

Here is my HTML:

<div id="menulinks"><a href="/digital" title="digital work">digital</a></div>

Tried putting a border on them for IE, still can't see any trace; using display: inline conditionally for lte IE7, seemingly no effect; changing z-index for lte IE7, seemingly no effect.

Is there some sort of glaring mistake I'm missing here? If you have IE 6 or 7 running on your computer, can you tell me what's going on here? Mostly I just need to know what is happening because I don't know how to solve a problem I can't see. Here is the actual page: http://www.tiffszerp.com/home . Links/sprites are supposed to be above the blue bar in the light grey block.

Also see Litmus shots! http://szerp.litmusapp.com/pub/e6f2970 (now with correct URL!)

I welcome and thank you for any suggestions!

2 answers

This was chosen as the best answer

Looks like the problem is the text-indent command - I think IE is interpreting that quite literally and throwing the text off the page to the left.

remove the line "text-indent: -9999px;" from the #menulinks style and the links should show up. You'll still have the problem of a border to deal with, it seems, but at least the links are showing.

Answered almost 10 years ago by Clay Hinson
  • I just now noticed in your original post you added the border for debugging, so it's not actually a problem. easy enough to get rid of then! Clay Hinson almost 10 years ago
  • Thanks! It helps in IE7, but not IE6.... but at least I know what to work with now! :) Tiffany S almost 10 years ago
  • Whoops! Just needed to add !important for IE6 to obey. Thanks again! :) :) Tiffany S almost 10 years ago
Marcel 57

Can't find the bug right now, but you better use lists for menus instead of placing only a elements. Then maybe try it to get work without sIFR first.

When you use lists, remember, you can include a element with one and the same id, only once in a html document. So think about using classes on them.

Answered almost 10 years ago by Marcel
  • I don't really see the point in using a list for this, since there are only 3 links and it would be just extra work to style the list then to work across browsers also... I'll try without SIFr, but I don't think that is affecting this issue. Thanks for taking a look. Tiffany S almost 10 years ago
  • Update: SIFr has no effect. Tiffany S almost 10 years ago