display: none for text links using CSS image rollovers

Do search engines frown on this like hidden links?

[PublicSphere]

The main set of links on my site uses css image rollovers, like this:

#home-tab a {
background-image: url(images/design/home_tab.gif);
display: block;
margin: 2px 0px 0px;
padding: 0px;
float: left;
height: 35px;
width: 51px;

}
#home-tab a:hover {
background-position: 51px 0px;

}

In the html I do this:

<div id="home-tab"><a href="homelink" title="Go home"><span class="no-text">Home</span></a></div>

And no-text is display:none.

This displays in browsers as I want it to and it displays right in Lynx, but I've got a feeling that search engines might pick up on this as a deceptive spam tactic.

Does anyone know of another way of displaying text for text-only browsers so that i get my image rollovers without text in normal browsers?

[jetboy]

Don't worry about it.

It's a valid use of image replacement, and there are an increasing number of sites using it with no ill-effects.

You might want to try something like:

text-indent: -5000px;

instead of display: none; though, as this will be read by screen readers, most of which ignore display: none; and visibility: hidden;

[PublicSphere]

OK,

I'll keep them like they are for now then. I've emailed Google referencing this thread so hopefully we'll get their answer soon.

Cheers JetBoy

[createErrorMsg]

text-indent: -5000px;

Couple that with overflow:hidden and there's gold in them thar hills. ;)

I don't think there's any definitive proof that display:none used for image replacement is a problem, however, note that the design "world" is moving away from display:none for these sorts of things. Image replacement is taking the route suggested by jetboy, and even drop menus as exemplified by the Suckerfish articles on HTMLDog are using positioning properties to make functional CSS drop menus, unlike earlier iterations which used display:none. Does this represent a fact-based fear of using display:none, or merely a conjectural one? Impossible to say. However, I would use the alternative methods, which are just as good and degrade nicely, just in case.

cEM

[D_Blackwell]

How, or why, would/are display: hidden; and overflow:hiden; be given different weights/standards of consideration be SEs?

[createErrorMsg]

overflow:hidden tells the browser not to display any content that "overflows" the boundaries of the element. When coupled with text-indent:-5000px, the effect is text that is indented backwards by 5000px (ie, goes 5000px off the left of the element), which is then not displayed because the overflow has been set to hidden.

Display:none (no such thing as display:hidden) is an outright statement to not display the content, and there is some concern (whether founded or not remains to be seen) that SEs have come to recognize it as a means of cloaking (hiding content from the user, but displaying it to the spider).

Again, AFAIK, there has not been any confirmation that display:none is frowned on by the SEs. The concern arises from it prominent(?) use by black hats to keyword stuff their pages. I was simply observing that there seems to be a movement afoot in the design community to avoid using display:none when replacing images or creating drop menus. This could be a case of mass paranoia, or it could be a shift based on slowly rising evidence that SEs don't like it.

BTW, here's another thread [webmasterworld.com] for some more on this topic.

cEM