Question

OK, so I have this website I maintain, uses WordPress, etc. One of the things the blog has is a little flag/ribbon thing in the upper-right corner that has three logos for the site’s associated Twitter, Facebook and RSS feeds.

I want it to be an all-CSS hyperlink so I’m doing the HTML this way:

<div id="headerflag">
    <a class="headerflagfacebook" href="http://www.facebook.com/(client's facebook link)"></a>
    <a class="headerflagtwitter" href="http://twitter.com/(client's twitter link)"></a>
    <a class="headerflagrss" href="http://feeds2.feedburner.com/(client's rss link)"></a>
</div>

and the CSS looks something like this

#headerflag
{
    width: 151px;
    height: 40px;
    position: relative;
    left: 708px;
    top: 20px;
    z-index: 3;
    background-image:url('images/flag.png');
}

a.headerflagfacebook, a.headerflagfacebook:hover
{
    width: 13px;
    height: 26px;
    position: absolute;
    left: 36px;
    top: 7px;
    z-index: 4;
    background-image:url('images/flag-facebook.png');
    display: block;
}

(repeat for the other two with slightly different positioning offsets, image names, etc.)

And until very recently, it worked everywhere just fine, even in the WebKit-based Safari.

But now it’s broken in Chrome:

The hovering works:

But the non-hover state is broken. I’m not completely sure, but I think the background image is being used again (that might explain the little triangles that disappear on hover – they’re from the triangular notch on the right?).

I’d say this is a bug but I’m not sure and it still renders this way even in the Canary build.

Does anyone know why this suddenly broke in Chrome? Is it a bug? Or am I doing something wrong?

Answer 1

You should be using sprites.

Take a look at this tutorial. http://iamchristill.com/html/the-right-way-to-make-rollover-buttons/

Works across browsers.