Internet Explorer 6 Override Functionality
Internet Explorer 6 will soon be replaced with Internet Explorer 7, but for right now, it's still a very widely used browser. Because IE 6 has many issues with fairly standard stylesheet techniques, an additional stylesheet, designed to override previous stylesheets with IE 6 specific fixes, is included and only readable by IE 6, thanks to the conditional comment (see "Related HTML"). On this page, I left the css comments in because they do a great job of explaining the techniques used. Here's a brief overview.
IE 6 doesn't support min-width, so a couple of classes that use expanding borders and negative margins emulates that functionality. IE 6 can't handle the negative margin used in source ordering, so a special, proprietary display type is used. It incorrectly expands boxes based on some kinds of content, so I applied an overflow:hidden. Backgrounds sometimes disappear behind lists, but position:relative fixes that. IE 6 handles the pre tag differently than other browsers, so special code is added here. At this time, IE 6 doesn't support Perfect Layout's method of creating custom corners. It should work, but doesn't, so I will be working on that for the next version. For now, I've simply turned off the corners. IE 6 doesn't support min-height, but the same effect is created by using a height declaration at the correct div, in this case #content. Finally, Hoverbox does not support IE 6, so the hover versions of images are hidden. Image galleries on IE 6 will look like a simple list of images.
Relevant HTML
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="../resources/css/ie6Hacks.css" media="screen" /><![endif]-->
Relevant CSS
/*------------------------------------------------------------*/
/* Min-width fix. */
/*------------------------------------------------------------*/
/* These two classes are hidden from everything but IE 6 and lower. These versions don't support the css min-width style. These classes and their attributes emulate the min-width functionality correctly and much more responsively than a javascript-based system. Technique was created by Stu Nicholls (http://cssplay.co.uk/boxes/minwidth.html). */
.ieWidthFixOuter
{
border-left:600px solid #fff;
position:relative;
float:left;
z-index:1;
}
/* The second class that fixes missing min-width functionality in IE. */
.ieWidthFixInner
{
margin-left:-600px;
position:relative;
float:left;
z-index:2;
}
/*------------------------------------------------------------*/
/* Miscellaneous fixes. */
/*------------------------------------------------------------*/
/* Fix for all kinds of weird problems IE has with putting #navigation below #content in the source code. */
#midpage
{
display:inline-block;
}
/* Preventative pixel errors in the location of #navigation because of incorrect box expansion from italic text. Fix created by artcoder (http://www.positioniseverything.net/explorer/expandingboxbug.html). */
#wrapper, #navigation
{
overflow:hidden;
}
/* Preventive measure to fix missing list item backgrounds. Fix created by Matt Smith (http://www.positioniseverything.net/explorer/ie-listbug.html). */
ul, ol, dl
{
position:relative;
}
/* Special styling for this special tag, which presents challenges in its own right. */
#content pre
{
padding-bottom:2em; /* Fix the missing bottom padding in IE. */
overflow:visible;
overflow-x:auto; /* Because IE handles pre tags differently. */
}
/* Rounded corner boxes won't work properly (at this time). This turns off the corner images. */
.tl, .tr, .bl, .br
{
background:none;
}
/* Has the same effect as min-height:450px when applied to .contentPadding. */
#content
{
height:450px;
}
/* Preventative measure to turn off incorrect rendering of the hover effect in image galleries. */
.hoverbox a:hover .preview
{
display:none;
}