Awhile back, I had this smart idea to use an overlay for my random headers. I’m sort of a fan of these things, I think it’s kind of fun to browse around a site and see the headers change. In the past they worked fine, a google search can find you a simple php image randomize script, but really any will do. What I’m going to talk about today is the problem I had which happened only in Firefox and drove me completely insane.
I decided the best way to implement a PNG overlay was to use a standard image and then change it’s background-image via css. So something like this:
<img src="http://www.kupatrix.com/i/base.png" alt="Kupatrix" height="107px" width="930px" class="overlay"/>
And then in your css something like:
img.overlay {background-image: url(http://www.kupatrix.com/i/h/);}
But, there’s a problem with that. For some reason Firefox will not update the element until you hover over the element (in this case, because it’s a link), or until you scroll down, and scroll back up. I’ve only ever seen this behavior with transparent PNGs and Firefox. Internet Explorer, Opera, Chrome, even Safari functioned as I anticipated — my random header images changed just fine.
This quirk drove me insane. I would tackle it every once in awhile, but Firefox ignored my attempts, mocking me as I hit “F5”.
The Fix
Without rambling too long about this aggravating quirk, I’ll cut to the chase: Positioning. Here’s how it works, first the HTML:
<div id="header"> <h1> <a href="http://www.kupatrix.com/" title="Kupatrix" rel="home"> <img src="http://www.kupatrix.com/i/h/" width="930" height="107" alt="Kupatrix" /> <div class="hover"> </div> </a> </h1> </div>
The key? The DIV below the <img> tag! Here’s what the CSS looks like:
div#header {
position: relative;
background: #093254 url('../../../i/h/') no-repeat 50% 0px;
margin-bottom: 20px;
}
div.hover {
background: transparent url('../../../i/base.png') no-repeat 50% 0px;
width: 930px;
height: 107px;
overflow: hidden;
position: absolute;
top: 0;
left: 20px;
}
div#header a {outline: none;} /* This prevents the funky dotted link outline, personal OCD thing */
How does it work? The parent div#header css includes position: relative; which comes into play later for the overlay. The overlay div uses position:absolute; to reposition itself on top of the image. Is it really that simple? Yes. Do I feel silly for not figuring this out earlier? You bet! But I’m thrilled I finally figured out a way to actually fix the stupid quirk more than anything.
The result? Well now every time someone loads a page on my website, the header is different… even in Firefox! Now the real answer is if I can apply this same fix to Blizzforums, which currently (in Firefox) displays a similar issue, however in this case the PNG is a smaller logo vs a true overlay. I imagine I might be able to do something like have a transparent gif in the main image (instead of the logo PNG), and then add some markup for the extra div and use the logo PNG as a background. Yay for extra markup!