Grow your CSS skills. Land your dream job.

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

  • # April 16, 2010 at 4:27 am

    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?

    # April 16, 2010 at 7:29 am

    Here are the two best ways. http://www.visibilityinherit.com/code/i … cement.php Alternately, you could hide the text with a combination of height and overflow hidden on the #nav, and padding-top equal to the height of the image on the anchor as I did here. http://www.visibilityinherit.com/code/sprites.php

    # April 16, 2010 at 10:45 am

    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!

    # April 16, 2010 at 10:56 am

    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…

    # April 16, 2010 at 12:08 pm

    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

    # April 16, 2010 at 4:57 pm

    Jacob, I owe you one buddy!

    Such a simple solution…I’m an idiot.

    # April 16, 2010 at 5:10 pm
    "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

    # April 21, 2010 at 7:50 am

    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.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".