Social icon labels won't stay hidden in IE

  • Resolved martyrkanin

    (@martyrkanin)


    12 years, 4 months 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!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    I can see them in newest chrome browser.

    Thread Starter martyrkanin

    (@martyrkanin)

    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. ]

    Thread Starter martyrkanin

    (@martyrkanin)

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

    Thread Starter martyrkanin

    (@martyrkanin)

    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!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Social icon labels won't stay hidden in IE’ is closed to new replies.