A.R. Van Halleorg

My .png won’t work as a background

As soon as IE6 started becoming moot and we dumped it’s butt on the sidewalk, we had people complaining that IE7 was the new IE6. Why? Because pngs still didn’t work like they should as a background.

This’ll be a simple post about that.

IE7 is your picky mother-in-law. It won’t be happy till you give it every little detail and omit nothing.

SO.

Here’s what you do.

.classname {background:url(image.png) no-repeat top left transparent;}

See the transparent? People seem to assume because transparent is not a valid ‘color:’ value, that it won’t work on a background, but that’s not true. Transparent validates as CSS 2.1 in a background. And for pngs to work properly in a background in IE7, you need to provide a background-color.

Like I said…it’s really…really…picky.

The container holding my floating elements won’t expand

For containers with floating elements inside, I generally put a spacer or an :after with an invisible content of some sort to make it know where the end is. This works in IE8 and Safari and Firefox, however IE7 wants nothing to do with it for some unbeknownst reason to me. SO. What did I do?

.classname {min-height:18px;}

Setting the min-height made it work immediately. I set it to 18px only because the standard line-height used in all the text is 18px.

Hope these two small things helped out.