Peekaboo Nightmare, PIE to the Rescue

I've been working on the web site of a charity during my spare time for the past few months. Last night, I finally got round to uploading a prototype of a few of the revamped pages. Today I got an email from them saying in essence that they liked the prototype but there were a few quirks. The penny dropped immediately: I had been developing the prototype on my Mac and testing with Firefox, they were looking at it with IE on Windows. So I fired up IE on my work laptop and, lo and behold: my prototype was complete rubbish!

Having assessed the extent of the damage, I wrote back saying I'd work on it but if they downloaded Firefox they could see what it was meant to look like.

So when I got home, I started work on making it presentable in IE. It all took quite a lot of effort and swearing but I got there eventually. So here is what it took:

• The first problem was with clearing floats: IE doesn't like it when the clearing element is empty. Luckily, Position is Everything came to the rescue with this handy article on clearing.
• Then it appears that, IE on Windows has another spec violation that causes all boxes to expand and enclose all content, regardless of any stated dimensions that may be smaller, which is incidentally one of the features the above article on clearing relies on. So, if I wanted to hide my clearing elements, not only did I need to set their height to zero but their font-size too. Maybe the best way will be to properly implement the self-clearing method explained in that same article.
• And of course, with all those floats all over the place, I had to come across the peekaboo bug! Luckily, a few strategically placed width properties sorted it but only after a healthy bit of swearing.

Moral of the story: if you ever come across IE bugs and want to keep sane while resolving them, head for PIE before attempting any modification of your code. I used to know this, I just got reminded tonight.