WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Social icon labels won't stay hidden in IE (5 posts)

  1. martyrkanin
    Member
    Posted 2 years ago #

    Someone using an unknown version of IE says he can see the "Facebook" and "YouTube" labels on my social icons on my menu. In Chrome, Firefox, and IE 9, it looks fine to me, but I do see the labels when I hold down the left mouse button and scroll across it, effectively selecting the hidden text. I'm using a child TwentyEleven theme, and the icons are inserted as custom links in the menu. My CSS classes for the social icons are as follows:

    #access .nav-facebook {
    width: 50px;
    text-align: center;
    float: right;
    }
    .nav-facebook,
    #access .nav-facebook:hover >a,
    #access .nav-facebook a:focus
    {
    background: url('images/facebook.png');
    background-repeat: no-repeat;
    padding: 0;
    }
    .nav-facebook a
    {
    color: transparent !important;
    padding: 0;

    My site is here.

    First, can anyone else see the icon labels? If so, what browser/version are you using? And second, does anyone know how to fix this and truly hide the labels?

    Thanks!

  2. Andrew
    Forum Moderator
    Posted 2 years ago #

    Where is the CSS that displays the icons as hidden?
    Or is it added by jQuery?

    I can see them in newest chrome browser.

  3. martyrkanin
    Member
    Posted 2 years ago #

    You see them in Chrome when you just view the site? Or when you select the text? Because when I just go to the site, I can't see them in Chrome (21.0.1180.60), Firefox, or IE 9. I have to hold down my mouse and scroll across the icon to see the label.

    I guess I don't specifically have any CSS code to display the label as hidden. The above code is all that's in my child style.css that deals with these icons.

    I set them up as custom links on the menu using the WordPress dashboard -- basically like this from this tutorial. How can I make the labels hidden using CSS?

    [ Please do not bump, that's not permitted here. ]

  4. martyrkanin
    Member
    Posted 2 years ago #

    The version of IE that shows the labels is IE 8. It's fine in IE 9.

  5. martyrkanin
    Member
    Posted 2 years ago #

    For anyone who runs into this problem in the future, I found the solution myself in the comments to this tutorial, which is what I initially used to set it up.

    The solution is here:

    text-indent: -9000px

    Put that in your CSS code under, for example, ".nav-facebook a" in my code above.

    Hope someone else finds this useful!

Topic Closed

This topic has been closed to new replies.

About this Topic