A very short time ago, when I was creating Pong for the games section, everything seemed to be going smooth. A little too smooth as it turned out. No more than a day later, a friend of mine was playing the game in IE6, and noticed that the ball was, for some bizarre reason, about 12px in height. At first I brushed it aside thinking he was simply messing around with me, until I got home that night and played the game in IE6. Sure enough, even though the height and width were hardset at 5px, the ball was 12 pixels tall.

I pulled my hair out for what seemed like an eternity trying to fix this ridiculous issue, and I’d nearly exhausted all possible options. Because of this, I decided to try setting what I thought would be a pretty stupid idea, and set font-size: xx-small. As if by magic the div height was reduced, and all was well.

Then it got me thinking, if you really needed to, you could just as easily set min-height: 2em; font-size: 2em; and have a more or less working, cross browser, valid (albiet hackish) min-height. But what of the font inside the element? Wrap it in a div and style it independently if you need to.

Although this obviously isn’t anything groundbreaking, it sure struck me as pretty neat.

I sure would’ve loved to have this knowledge on at least a few projects I can think of right now.