dots and underlines – Snap

  • Unknown's avatar
    magagirao · Member ·

    Hello.
    Our social media icons when rollover shows an underline and a dot. How can we remove it?
    We try ‘text-decoration: none’ and ‘border:0;’ but nothing happens.
    Thanks in advance.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Well, this one too a bit of doing since this only showed up in Firefox and a big thanks goes out to my teammate, @designsimply for helping figure this one out.

    Use the following rules instead of the ones you have and see how this works for you. First off, I removed the ?w=XX from the end of each URL since that could possibly cause issues. Then I changed the background image declaration for each to a straight background declaration and incorporated the background position into it and deleted the separate background position declaration you had. Lastly, just for good measure, we set a background none for icons li a (last rule below).

    .icons li .twitter {
    background: url("http://kerryandluis.files.wordpress.com/2013/11/twitter.png") no-repeat scroll 10px center rgba(0, 0, 0, 0);
    height: 99px;
    width: 34px;
}

.icons li .facebook {
    background: url("http://kerryandluis.files.wordpress.com/2013/11/face.png") no-repeat scroll 10px center rgba(0, 0, 0, 0);
    height: 99px;
    width: 32px;
}

.icons li .pinterest {
    background: url("http://kerryandluis.files.wordpress.com/2013/11/pinterest.png") no-repeat scroll 10px center rgba(0, 0, 0, 0);
    height: 99px;
    width: 32px;
}

.icons li .rss {
    background: url("http://kerryandluis.files.wordpress.com/2013/11/rss.png") no-repeat scroll 10px center rgba(0, 0, 0, 0);
    height: 99px;
    width: 40px;
}

.icons li a {
background: none;
}
  • Unknown's avatar
    magagirao · Member ·

    Hello thesacredpath.
    Thanks for your help and also for your team.

    Unfortunely, it doesn’t change anything.
    In the demo: http://snapdemo.wordpress.com the icons are also images, right? But in Firefox they look OK.

  • Unknown's avatar
    thesacredpath · Member ·

    Hmmm, I’m stumped. @designsimply and I had this working in FF with the above code, and I’ve tried everything I can think of to get rid of it. It is a Firefox only issue it appears as it is fine in Chrome and Safari. Not sure about IE since I don’t have that to test at the moment.

  • Unknown's avatar
    thesacredpath · Member ·

    I’ll keep working on this though with @designsimply. Hopefully we can find a solution for you.

    I do have one, that I think will work, and that is to create a second image, a hover image, and then remove the opacity settings. You would create a hover rule for each of the icons. Example below.

    .icons li .twitter:hover {
    background: url("URL_OF_HOVER_IMAGE") no-repeat scroll center center rgba(0, 0, 0, 0);
}

    You might do a test and see what happens with the above.

  • Unknown's avatar
    justpi · Member ·

    Those lines aren’t part of the icons, they are part of the footer bg that shows through when the icons become semi-transparent. You have added this: 

    #footer {
    background: url("http://kerryandluis.files.wordpress.com/2013/11/00.png?w=980") no-repeat scroll center top / contain rgba(0, 0, 0, 0);
    border-top: medium none;
    height: 80px;
}

    Try replacing “center top” with “center 12px”.

  • Unknown's avatar
    magagirao · Member ·

    It’s working : ) I don’t understand why and how, but it’s all OK.
    I was playing with the height of each icon and realized that the underline is always there, no matter I rollover it or not.
    After some code tests with no sucess, I try put the center to 20px and it’s working perfect with height to 99px. If I declare height 60px the line is there.
    Thank you justpi, and thank you so much thesacredpath.

  • Unknown's avatar
    justpi · Member ·

    If you don’t understand why or how, make the bg to #footer colored, to see where the bg image ends now and where it ended before. My solution moves the bg image a little lower in relation to the icons, your solution moves the icons a little higher in relation to the bg image: same result, only mine was more economical (one change vs four). A third solution would be to upload a new version of your 00.png after you edited it to increase its pixel height.

    And now I’m seeing that all three of these are imperfect solutions, because the theme is responsive. Drag the browser window to make it narrower and see that after a certain point the lines will reappear, and after a certain further point the arrow won’t be aligned with the icons. You need to reconsider the whole thing.

  • Unknown's avatar
    magagirao · Member ·

    Justpi, before I wrote I had tried your solution, but the line was still there. Now, I’ve tried again with your code and it’s OK. Thanks.
    I took off my ‘center to 20 px’

  • Unknown's avatar
    justpi · Member ·

    You didn’t have to change from your solution to mine: as I said, they produce the same result.

    And I don’t see why you ignored my second paragraph. Do you find the arrow (and the sidebar, and the read-more link) ok on the following screenshot?
    http://wpbtips.files.wordpress.com/2013/11/piteira_narrow.png
    Or the arrow and the layout of the posts on the next one?

  • Unknown's avatar
    magagirao · Member ·

    Yes, they produce the same result, but you’re right your is more economical.
    I didn’t ignored, just had the time to see it too. Going to check it now.
    Thanks.

  • Unknown's avatar
    magagirao · Member ·

    P.S. Just don’t have the time.

  • Unknown's avatar
    magagirao · Member ·

    Yes, it’s true. Thank you for your alert.
    I don’t know how to solve it. Can you help me?

  • The topic ‘dots and underlines – Snap’ is closed to new replies.