IE6 versus position:fixed layout.

Let’s go back to this post: Simple layout using position:fixed. Why IE6 does not support this site? Well, IE6 does not support position:fixed and skip top, bottom, left and right properties. As a result all elements appear in their normal flow. (In some cases we can use position:absolute instead position:fixed but it has some constraints).

 

Anyway, there is a possibility to use another famous bug (difference in interpretation of CSS parameters) from IE5 to achieve similar layout working in IE5 and IE6.

 

Let’s start from beginning. In 1998, when IE5 appears, most of the webmasters use HTML to create web pages. Also most of the browsers could not correctly interpret CSS1 and XHTML standards. IE5 has a bug in interpretation of a size of and element (so called box model bug) http://en.Wikipedia.org/wiki/Internet_Explorer_box_model_bug.

 

In IE5 width value includes also margin and padding values. Therefore, if we set width parameter to 100% and the margin and padding to 10px then the full element width will fit exactly to the window (since in other browsers which supports W3C standard the element width will extend the window by 40px).

This bug was fixed in IE6 but so many websites created for IE5 already existed that Microsoft decided to keep compliance with the old interpretation and enables a possibility to turn IE6 to render the CSS the way the IE5 does. The same happened with many different browsers that old versions didn’t support correctly W3C standards. The mode, when the browsers work as an old version, is called Quirks mode. More about it here: http://www.quirksmode.org/.

 

How to use quirks mode to build a layout? We can set up the content layer to make it fit to the window (with and height to 100%) and set borders to the size of menu, header and footer. Then we move this layer to the back (z-index:-1) and put header, menu and footer over it. The result will be nearly the same. We only need to make the left border the same color as menu (menu won’t be stretched between header and footer anymore) and change positioning of footer to absolute.

How to switch between the styles depending on a browser? First of all we have to assure that IE6 will turn to quirks mode. For that purpose we need to set a DOCTYPE to xhtml strict and add an xml prolog. (In this case IE7 will stay in standard mode). Then we can use conditional declaration:

<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Now the only difference between this layout and that one from previous post is the lack of white space.

The second css file ie.css will be loaded only in IE6 or lower versions. In fact, even for IE6 or IE5 both of these style files will be loaded and all properties from first file will be replaced with values from the second file. That has some advantage because we don’t need to define everything again (just the differences).

The second layout and both css files are available here.

Screen shots generated on http://browsershots.org/

IE8

IE7

IE6

IE5.5