Random Images, PNGs, Firefox, and Annoyance

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">
  <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">&nbsp;</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!

Comments are closed.