I believe every web developer has probably had to deal with this at one time or another. It all starts out with a beautiful layout and a few floats, you check the design in FireFox, then in Safari, you open Chrome, and finally you even test in Opera. Everything looks fantastic, you are all smiles and blue skies…
Firefox3 No Border Problems
But there’s a problem, lurking beneath the genius of your layout is a CSS border on one of the div’s, and inside that bordered div is a floated object/element. Normally with modern/compliant browsers, this isn’t an issue, but IE is neither modern nor compliant by any means. So you crack open IE7 (the lesser of current evils) and notice that your border seems to ‘disappear’. More weirdness, you scroll around the page and the borders re-appear (similar to the peek-a-boo bug, but no this is different).
IE7 with Phantom borders
So you crack open your VM (cos by now you’d better only have ie6 in a VM – or using xenocodes ie6.exe… unless you have office 2k7 installed, at which point your existing installation of ie7 may go suicidal on you – another story for another post) and you check to see how ie6 renders the page.
It looks like IE6 broke your internets
Wow, you can’t see it (because I cropped the image), but the entire layout of the page has exploded, I fixed it originally with extra css, but before I did, I had div’s coming out of the containing-div, odd margins, and the container has gained 20px on the right. Oh, and the borders are still disappearing and reappearing on me.
So what are you supposed to do when this happens? Well first I tried changing the flow of the page, taking out the float and lining things up with out it. I already had a separate ie6 and ie7 style-sheet, so it was almost working. I say almost because I really did need to float an image and no matter how I changed the presentation (CSS) I could not get it to line up AND have the borders appear normally. This is when I stumbled onto the greatest IE discovery since dd_belatedPNGfix:
#reviews-all-box {
zoom: 1;
}
Yep, that’s it, “zoom: 1;” -hence the term ‘mazda’, get it?- on your div that has the border. This forces IE to turn on the IE only ‘hasLayout’ tag which then changes the way the page is drawn in IE. Yes, there is a lot more to it than that (read here), but the quickest way to enable ‘hasLayout’ is to just throw zoom in your css. After using the above code on my ie6 and ie7 style-sheets the problems went away, both IE versions have magically obeyed CSS formatting, and the borders are where they are supposed to be (without disappearing).
This is IE7 with zoom: 1 (yes IE6 looks the same)
So what have we learned? M$ is in league with the auto industry (think of SYNC…!). No I’m just messing with you, what we learned is that if you decide to make a browser, please for the love of the internet, please, please, I beg of you, please, make it W3C standards compliant so that we don’t have to keep using these ghetto hacks to make it act like it should.