I still hate IE

New project I’m working on is coming along nicely. Layout, content display and navigation all working pretty much exactly as the customer wants it too. Sweet.

Because it’s how I roll, all of the dev has been happening in FireFox 3 on the Mac. And everything is exactly where it is supposed to be. Just like Safari. Just like Camino. Then, I fired up windows.

Firefox. Check. Looks exactly (or, as close to exact as you can get for crappy Windows font rendering) like it should. Crossing my fingers, toes and eyes (for good measure), I fire up IE 7.

Epic Fail.

First of all, a p in the header is acting like it’s not even anywhere near the div that it’s contained within. Some of the spacing is a bit wonky too. Oh, and my very favorite part? the horizontal scroll bar that I can not get rid of at the bottom of the page, even when I strip everything out of out the layout and shrink the overall width (body and content containing div) to 50%.

I’m sure I’ll be able to chase this particular ‘bug’ down, but it’s going to take me some time. Time I can’t bill the customer. Time I have to spend trying stuff, signing up for forums that I will never visit again, time that I will never get back.

It would appear I’m not the only one having this problem. A quick check of msn.com in Firefox 3 on the Mac vs. IE 7 shows that they can’t even get the entire page contents to fit within the browser window. See for yourself.

Firefox 3 on the Mac

Not too shabby. I mean, it is msn.com for craps sake. Now, for IE7. Try not to laugh too hard.

Internet Explorer v7 in Windows

For curiosity sake, I ran all of my sites through IE 7 (something I do at least quarterly to make sure nothing is broken) and you know what? They all look exactly the same (again, within reason, see above) as they do in Firefox/Safari/every other browser on the planet.

Not to toot my own horn here, but there is a reason I stay away from complicated layouts. This is reason #1. Sure my sites are fairly boring looking and don’t have any cool tech behind them (other than Wordpress, which is teh awesome), but dammit if they don’t work every time, in every browser. Well, except the iPhone, but it’s a width/wrapping issue that affects less than 1% of 1% of my total viewers, so I’m not worried.

Back to the research. Of course, if anyone has an idea for a fix, I’m all ears. So you know, I have tried the overflow:auto, overflow-x:auto, overflow:hidden and overflow-x:hidden and well as getting rid of all italics. Next will be to have the raw page, without CSS, and I will add each CSS element until it breaks.

I’ll comment with the fix.