Alternative to "text-indent:-9999px"?

[keithdevon]

Does anyone know a way to hide text without using text-indent?

I’m using background image replacement on the top level of a drop down menu. However, when I use text-indent:-9999px the link and hover state no longer works in IE. The test site is a http://www.uberleaf.com.

My current ‘solution’ is to have the text very small and white but obviously this isn’t good enough. Any ideas?

[keithdevon]

Thanks Eric,

I used a version of your first technique to achieve the desired effect.

The child selector "ul > li > a" was used to target the appropriate top-level link for the "position:relative; z-index:-1;" CSS.

"overflow:hidden;" was applied to all li items using "#suckerfishnav li".

Thanks for your help buddy!

[keithdevon]

Shit. Scratch that.

I was having a blonde moment. Obviously placing the anchor behind the background means it’s not clickable!!! :lol:

Any other ideas?! I’m gonna have to come back to this tomorrow…

[doobie]

Correct me if I’m wrong, but another way to achieve that problem with the hover states when text is indented (hidden) is to set the height and width of the replaced image. Otherwise, it takes a height of 1px x 1px ( or is it 0x0?).

-Jacob

[keithdevon]

Jacob, I owe you one buddy!

Such a simple solution…I’m an idiot.

[doobie]

"keithdevon" wrote:

Jacob, I owe you one buddy!

Such a simple solution…I’m an idiot.

I only recently figured this one out. Took me weeks… The logo on my wordpress site wouldn’t work for the longest time… maybe I’m an idiot too, but I think it’s just a little counter-intuitive.

Glad I could help.

-Jacob

[Illogical]

Maybe not an alternative but a solution to keep the WP logo still clickable if you do the -9999px indent trick:

CSS:
#logo h1 { text-indent: -9999px; }

#logo h1 a { width: 440px;
height: 80px;
display: block;
background: url(style/images/header.png) no-repeat; }

HTML:
<div id="logo">
<h1><a href="<?php echo get_option(‘home’); ?>/"><?php bloginfo(‘name’); ?></a></h1>
</div>

Not the cleanest solution, since you get a big block in your header when you click the replaced link, but it works.

[Author]

Posts