A.R. Van Halleorg

There’s a good chance that you’ve probably seen this before and weren’t able to come up with a solution and ripped your hair out trying to get it and maybe that’s what you were about to do before you stumbled on this. I was shown this by a coworker this morning and I decided to add it to my ever growing list of reasons why IE6/IE7 reminds me of a mother-in-law with it’s horrific ability to nag for details. (Not my case, my mother-in-law doesn’t care about anything)

So! Actually there are 2 things I’ve seen that work :

1. Remove the margin-top from the element (especially things like headers and put padding or line-height instead)

2. (from coworker) set your element to have vertical-align:top and suddenly it disappears!

Hope that helped someone. If not, well I guess I’ll keep looking.

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.