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?
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?).
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.
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?
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!
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...
-Jacob
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
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.