garoutte.com

Internet Explorer continually amazes me.

I was working on a project with a couple of simple floated columns each of which had a div header with a background image. Nothing fancy, just some simple CSS:

.col{
  float: left;
}
.pct33{
  width: 32%;
}
#category1{
  background: transparent url(images/cat1.png)no-repeat;
}
#category2{
  background: transparent url(images/cat2.png)no-repeat;
}
#category3{
  background: transparent url(images/cat3.png)no-repeat;
}

The HTML is pretty straight-forward as well:

<div>
  <div id="category1" class="col pct33">
    <h2>category 1</h2>
  </div>
  <div id="category2" class="col pct33">
    <h2>category 2</h2>
  </div>
  <div id="category3" class="col pct33">
    <h2>category 3</h2>
  </div>
</div>

The problem is that in Internet Explorer the background images refuse to display. If it was version 6, I suppose I could forgive it, but this was version 7!

Expecting it to be related to the well documented float or peek-a-boo bugs, I tried all of the usual hacks to no avail.

Come to find out the thing to fix the problem is the “shorthand” background rule that combines the background-color, background-image, background-repeat into one statement.

Now, this has never been a problem before and usually displays fine. I think it may be the combination of the float with the transparent background… I don’t really know. All I do know is that once I converted the rule to the following, things started to show up:

#category1{
  background-color: transparent;
  background-image: url(images/cat1.png);
  background-repeat: no-repeat;
}
...

So when all else fails, try thinking outside of the box (or tag).