By: John Gallant , Holly Bergevin ,
Page 1 of 6
This article has been revised as of April 1st 2007, with corrections and wholly new material concerning the recently released Internet Explorer 7 browser.
For several years it's been a well known fact that various Internet Explorer versions have problems displaying web pages. It's become fashionable to badmouth IE in an aggrieved tone, and indeed it is most satisfying to rip that browser up one side and down the other. But what's crucial to remember is that IE/Win is still far and away the most used browser on the web, so whining about its drawbacks is a loser's game. We won't play that game and will try hard to make IE/Win behave as close to the standards as we can manage.
Lots of people want to embrace tableless CSS design, only to encounter the "Explorer bug suite" and a seemingly endless round of aggravating bugs, each hard to resolve. True, some of those bugs are really not "bugs" at all, but rather misapplications of the W3C standards, but far too many cannot be fixed by correcting some errant typo. Although a full understanding of the ways IE "gets it wrong" is a full-time job, it's usually possible to solve most problems with just a few bug-fixing tools. This article intends to teach you those tools in the form of two "magic bullets."
But First, A Bit of History...
IE5/Win (released in 1999) was a milestone over the hideous IE4 version, but major work was still needed to make IE a serious CSS browser, as was true of all browsers at the time. IE5.5 ushered in considerable new CSS support, and cleaned up a lot of small pesky bugs dealing with margins and borders. IE5.5 is greatly superior to IE5.01 in many ways. Major difficulties still remained, but at least a very simple tableless layout could actually work from time to time.
When IE6 was released in 2001, most remaining easy CSS bugs were fixed, leaving just a few very puzzling problems. Several new and bizarre bugs also appeared, such as the Peekaboo Bug (look on the third page of the article). IE6 did achieve one very important goal by starting to obey the box model as described by the W3C, rather than IE's own proprietary model, at least when the browser is working in standards mode. The most damaging of the remaining IE bugs mostly seemed to revolve around use of the float property. Eventually it was noticed that the MSDN site itself had a page describing something called the hasLayout Property.
Ingo Chao et al. wrote: "'Layout' is an IE/Win proprietary concept that determines how elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events." (See On having layout for more information.) This discovery was a key to understanding what was going on with IE's rendering of various elements, and especially floats. Our ability to control (or not control) the mysterious hasLayout property has allowed the construction of more robust CSS designs than ever before.
Now IE7 is here, and finally Microsoft has dealt with a slew of nagging CSS bugs, among them the really nasty 3px bug. The demise of that bug alone will lift a huge burden off of our shoulders. Unfortunately, IE7 still retains the proprietary hasLayout scheme, and so layout-based fixes are still needed if we are to use more than minimal CSS floating.
Even though many of the long-standing IE float bugs have been suppressed in IE7, a few small bugs may still be found in that browser. To be fair, all browsers have such bugs, and all these unfixable bugs together constitute the current limits of acceptable CSS design. As a result, IE7 can now handle rather complex layouts with ease, but only when those crucial hasLayout fixes are in place. However, All IE/Win versions remain vulnerable to hasLayout-related problems.
Right now, a lot of CSS sites that have code to control hasLayout in IE6 are breaking in IE7, not because IE7 is "bad" necessarily, but because it no longer recognizes the commonly-used Holly hack, a CSS hack that causes all browsers other than IE6 and below to ignore the layout-triggering CSS rule within. IE7 fails to read this CSS hack for reasons to be explained shortly.
All this has complicated our lives because older sites will need changes to the layout-fix CSS rules to accommodate IE7, while new sites need to be written so that the layout fixes will work in IE7 as well as earlier versions of IE/Win. We'll get into details a bit later, but right now let's learn about some basic things about dealing with IE/Win bugs in general.