For years, Internet Explorer 6 (IE6) has posed significant challenges for web designers globally. As users and developers alike embrace the standard-compliant functionalities of modern browsers such as Firefox, Opera, and Safari, IE6 persists as a persistent issue, lurking in the shadows as its relevance fades and it meets an arduous demise.While we anticipate the day IE6 joins Netscape 4 in obsolescence, we must also consider the users who continue to endure its limitations. Let us honor the final moments of IE6 with a comprehensive guide to mastering this problematic browser.This extensive article delves into the most effective techniques for supporting IE6, including precise targeting, specific CSS hacks, image compatibility, box models, floats, and more.Conditional comments are instrumental in managing IE6’s behavior. These code snippets, embedded within your (X)HTML, allow for the precise targeting of specific versions of Internet Explorer. Below is an example of a conditional comment aimed at IE6:<!–[if IE6]>
<p>Oops! It seems you’re still using Internet Explorer 6. You deserve a better experience!</p>
<![endif]–>This technique ensures that code and content are exclusively delivered to IE6 users, while other browsers remain unaffected. Although a Microsoft creation, conditional comments are a powerful tool for manipulating specific versions of Internet Explorer.One of the simplest ways to apply styles exclusively to IE6 is by incorporating an “IE6-only” stylesheet within your web page’s <head> section:<!–[if IE6]>
<link rel=”stylesheet” href=”http://domain.tld/ie6.css”
media=”screen” />
<![endif]–>Within the “ie6.css” file, you can consolidate all IE6-specific CSS hacks and tricks. This method allows for a single stylesheet that is ignored by all other browsers, eliminating the need for browser-specific hacks. Selectors within the IE6-only stylesheet are targeted directly without the need for additional hacks.Conditional comments are not limited to targeting IE6; they can also filter any version of Internet Explorer for both HTML and XHTML. For further insights into conditional comments, these articles are highly recommended:
Microsoft’s Explanation of Conditional Comments
QuirksMode’s Guide to Conditional Comments
Understanding Conditional Comments
Despite their utility, there are instances where it may be more practical to apply IE6-specific styles directly within the stylesheet. For example, during site development, it can be advantageous to have a single stylesheet with IE6 styles alongside standard styles for easy comparison. Once development is complete, these in-CSS hacks can be consolidated into an IE6 stylesheet included via conditional comments.Several effective in-CSS targeting methods exist for IE6. One of the most widely used is the “star-HTML” hack:/* target IE6 */* html #selector { color: red; }This selector is ignored by standards-compliant browsers but recognized by IE6, even though it is the highest element in the document tree. This allows for the application of CSS styles specifically to IE6 without disrupting other browsers. This method is entirely valid and provides a straightforward way to target IE6.There are also scenarios where it is necessary to hide styles from IE6. The “child-selector filter” hack is effective in applying CSS styles to all browsers except IE6:/* filter IE6 */html>body #selector { color: red; }This selector is valid and recognized by all standards-compliant browsers. Its effectiveness lies in IE6’s inability to understand its meaning.Other useful methods for targeting and filtering IE6 include the “!important” directive, which overrides property values for IE6:#selector {
width: 200px !important;
width: 100px; /* target IE6 and lower */
}When two identical properties exist for a selector, IE6 applies the second property, even if the first includes the “!important” directive. Other browsers, of course, apply the “!important” declaration, allowing for the targeting of IE6 with the subsequent rule.One of IE6’s most frustrating limitations is its lack of support for 32-bit alpha-transparent PNG images. When displaying such images, IE6 replaces all transparency with an unappealing grey background. Fortunately, there are numerous workarounds and solutions to this well-known issue.One straightforward approach to ensure compatibility with IE6 is to use fully transparent PNG images, which are supported by all browsers, including IE6. Alternatively, you can apply alpha-transparency via the 8-bit PNG format instead of the standard 32-bit format. By saving your alpha-transparent PNG image in 8-bit format and incorporating it into your design, you can achieve a graceful degradation of alpha-transparency in IE6 while maintaining compatibility with modern browsers.It is also possible to enable IE6 support for 32-bit alpha-transparency using various scripts. These scripts rely on a proprietary Microsoft filter, which can be included in your CSS file as follows:* html .iepngfix { behavior: url(iepngfix.htc); }These files must be uploaded to the same directory as your CSS file, where the first is a blank image and the second is an HTC script providing the required functionality for 32-bit alpha-transparency in IE6.There are numerous freely available scripts that offer advanced functionality using this filter. Here are a few popular options:
DD_belatedPNG
Unit PNG Fix
TwinHelix IE PNG Fix
Roundup of PNG Fixes for IE
Early versions of Internet Explorer incorrectly interpreted the box model, including borders and padding in the calculation of content width. For instance:div {
border: 10px solid black;
padding: 10px;
height: 100px;
width: 100px;
}In modern browsers, the height and width are calculated according to W3C specifications. However, in early versions of IE, the height and width are incorrectly calculated. This discrepancy leads to many design inconsistencies between standards-compliant browsers and older versions of Internet Explorer.Thankfully, the broken box model was addressed in IE6, which correctly interprets the box model when a complete CSS box-sizing is present. When a complete box-sizing is included, IE6 switches to “standards-compliant mode” or “almost-standards-compliant mode,” both of which cause IE6 to correctly interpret the box model. Conversely, when a complete box-sizing is not included, IE6 reverts to “quirks mode” and incorrectly interprets the box model.By including a complete box-sizing and designing in standards-compliant mode, the box-model problem is easily resolved in IE6.If you need to work in quirks mode, the next simplest fix is to avoid applying padding or borders to elements for which you have specified a width. You can always apply padding and/or margins to the enclosed elements.In some cases, it is necessary to control the height and width of specific elements. For these situations, we can use the “Tan Hack” to achieve the desired result:#selector {
border: 10px solid black;
padding: 10px;
height: 100px;
width: 100px;
}
* html #selector {
height: 140px; /* targets IE5 and IE6 in quirks mode */
height: 100px; /* targets IE6 in standards mode */
width: 140px; /* targets IE5 and IE6 in quirks mode */
width: 100px; /* targets IE6 in standards mode */
}In the first set of rules, we apply our width and height as normal for all standard-compliant browsers. In the second set of rules, we adjust the values for height and width to account for the broken box model in IE5 and IE6 quirks mode.IE6 does not support maximum and minimum height and width properties out of the box. This is a significant drawback for designers, as many layout scenarios require these properties to function properly.In modern, standards-compliant browsers, we can use the following CSS to achieve our goals:div.max-height {
max-height: 333px;
}
div.min-height {
min-height: 333px;
}
div.max-width {
max-width: 333px;
}
div.min-width {
min-width: 333px;
}Unfortunately, Internet Explorer completely fails to understand these basic CSS properties. However, IE supports its own, proprietary “expression” attribute, which enables us to use JavaScript expressions to manipulate (X)HTML document properties such as max/min-width and max/min-height. For example, to specify a width property value via the “expression” attribute, we could use:div {
width: expression(333 + “px”);
}This is equivalent to:div {
width: 333px;
}There are two downsides to using IE’s “expression” attribute. First, as expressions are essentially JavaScript, they fail when JavaScript is disabled or otherwise missing in the user’s browser. Second, using CSS expressions for min/max properties is very resource-intensive and may negatively impact browser performance. Nonetheless, the setting of max/min-widths/heights remains an important tool in the web designer’s toolbox.With this in mind, here are some useful CSS expressions enabling complete min/max functionality in IE6:max-width/* max-width for IE6 */
* html div.max-width {
width: expression(document.body.clientWidth > 776 ? “777px” : “auto”);
}
/* max-width for standards-compliant browsers */
div.max-width {
max-width: 777px;
}min-width/* min-width for IE6 */
* html div.min-width {
width: expression(document.body.clientWidth 332 ? “333px” : “auto”);
}
/* max-height for standards-compliant browsers */
div.max-height {
max-height: 333px;
}min-heightFortunately, we can bypass the complex JavaScript/CSS expressions when applying minimum height in IE6. Thanks to Dustin Diaz, we can set “min-height” in IE6 with this snippet of valid CSS:/* min-height for IE6 */
div.min-height {
min-height: 500px;
height: auto !important;
height: 500px;
}Many web designers are familiar with IE6’s “doubled floated-margin bug.” This bug occurs when you float an element and then apply a margin in the same direction, resulting in the margin being doubled for no apparent reason. Fortunately, this bug is easy to fix by changing the display type of the floated element from “block” to “inline”:div#selector {
float: right;
margin-right: 10px;
}
* html div#selector {
display: inline; /* kill double-margin bug */
}This solution works 99% of the time without issue. For rare cases where this fix doesn’t work, you may need to workaround the issue by removing the margin and applying padding to either the parent element or the floated element itself.Clearing floats is another common layout challenge, affecting not only IE6 but also many modern browsers. In an ideal world, a container would enclose its floated children completely. However, in the imperfect world of web browsers, floats are often not fully enclosed, leading to the term “uncleared” floats. Fortunately, there are several easy ways to clear floats in IE6 and other browsers.One of the oldest methods to clear floats is the clearfix hack:.clearfix:after {
content: ” “;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix { display: block; }
/* End hide from IE-mac */To use this method, place the clearfix hack into your CSS file and change all instances of “clearfix” to the selector of the element that needs to clear its floated ancestors.Another CSS method for clearing floats is to simply float the container
