Continuing my discussion with “css junkie”, John Gallant, another major problem with Internet Explorer version 6 is called ‘hasLayout’. The IE browser decides if the hasLayout property is applied to a box or not. It is triggered when the author applies certain properties to a box such as width or height or floating or absolute positioning. Once a box hasLayout it behaves quite differently than when it doesn’t have layout.
You might think that a simple solution would be to apply hasLayout universally, but there are certain situations where you do not want the hasLayout property to be applied. John cites http://www.satzansatz.de/cssd/onhavinglayout.html for anyone who would like to have a better understanding of hasLayout.
The good news is that the issues with hasLayout has been addressed in IE8 and IE8 is now pretty standardized. The bad news is that IE6 is pretty much institutionalized in government and schools and they can be slow to change to the standardized version of IE.
I asked John how we as designers can avoid some of these problems. He recommends the method that he uses, which is to employ a ‘box-in-a-box’ approach. He does not use tables. His reason is simply that divs are just more flexible. He creates his major structure for the page with divs using only widths, no paddings or margins to complicate things. Then he places another div inside each. The inside div is the one that gets the borders and the padding but no widths. This way you have taken the widths and the side paddings and borders and separated them into two different elements nested together. The outer one handles the width. The inner one handles the rest.
Now with regard to ‘hasLayout’, the outer box gets the width and therefore hasLayout is inferred on it and the inner one does not have layout. To give hasLayout to the inner box, John recommends using the Microsoft proprietary ‘zoom’ property. Zoom is not in the specs and it will not validate. But if you use the property zoom on a box you will give it hasLayout. Simply applying the zoom property with the value of 1, the box will not change size so it will not harm the layout of your page, but the box now hasLayout. This is referred to as the zoom fix.
Because the zoom fix will not validate, if you are working for an organization that requires that the pages validate, you may want to put his fix into a conditional comment. IE6 will look for this syntax inside a conditional comment tag. When IE6 sees this special syntax it says, “Oh, I get to read this comment instead of ignoring it” (as a browser normally ignores comments). John provides this example of a conditional comment:
<!–[if lte IE 6]>
<link rel=”stylesheet” href=”css/ie-hacks.css” type=”text/css” />
This particular example is for making PNG images work better. It has a starting tag that says, if the browser version is less than or equal to IE6, (then whatever it is you want the conditional comment to do) and it has an ending tag. Other browsers see it as an html comment and ignore it completely. IE6, however sees this syntax and is given permission to read it. This is how you can feed information to EI6 that other browsers won’t see.
John also recommends the Wikipedia article at http://en.wikipedia.org/wiki/Conditional_comment
for a more in-depth understanding of what can be accomplished with conditional comments.
You can reach John via his website at www.positioniseverything.net, at cssjunkie on Skype.