CODEWITHSUNDEEP
cssfontswebkithover
Martin
Martin

Reputation: 351

Hover in Webkit shows original colour at edges

I'm using some font icons to represent twitter, Facebook and rss on a site I'm building and they look great. They change to their appropriate colour on hover, when active and on focus and look great on Firefox and Opera.

My problem is with Safari and Chrome on Mac (so I'm assuming webkit). On hover you can see just a tiny bit of white along the edges of one or two of the icons.

I've tried changing the link/visited colour to green and you can see a little of the green on hover, so I know it's the default colour that's being seen.

Have a look at the icons on the left of the footer here: http://tempertemper.net/index2

Here are some screen grabs I've taken:

enter image description here

The twitter bird doesn't look great against the background but I've still got some tweaks to make. You can just make the white out around its beak. The facebook logo shows it top and bottom and the rss symbol at the left and bottom edges.

Thanks for having a look,

Martin.

Upvotes: 1

Views: 586

Answers (3)

caedes
caedes

Reputation: 69

I encountered the same problem with Webkit on Mac with the Univers font.

I solved it by setting half pixel in my font size attribute: font-size: 18.5px

Upvotes: 4

Martin
Martin

Reputation: 351

I contacted the chap who made the font and he suggested changing the order of the @font-face requests so that svg was above woff and ttf and it made it better. I then played with the font sizing and settled on 4.15em, which showed no white edges in Safari or Chrome for Mac. 4.1, 4.2, 4.3, 4.4, etc. all presented slight white lines.

So it's fixed, but I don't know why!

Thanks to all for having a look and if any of you might know why it was happening at all but a few font sizes I'd be interested to know :)

Upvotes: 1

Vukašin Manojlović
Vukašin Manojlović

Reputation: 2733

Add this to anchor style:

.social a:link, .social a:visited {
    color: white;
    border-bottom: none;
    text-decoration: none;
}

Upvotes: 0

Related Questions