Learning To Love IE6

LEARNING TO LOVE IE6
Bruno Abrantes
bruno@brunoabrantes.com
Tuesday, March 31, 2009
View the whole table at: http://www.w3schools.com/browsers/browsers_stats.asp
OK, “LEARNING TO LIVE WITH IE6”

TARGET AUDIENCE
• We can assume we’re dealing with an average of 20% of IE6

users.
• This figure can go up or down, depending on your specific

target audience.
• So, before you start developing, get to know your audience!

Image from http://alistapart.com
PROGRESSIVE ENHANCEMENT

PROGRESSIVE
ENHANCEMENT
• Originates from the principle of Graceful Degradation;
• However, it goes the opposite direction;
• You should provide a regular experience for users with dated

browsers.

PROGRESSIVE
ENHANCEMENT
• However, for users with current browsers, you should provide

an enhanced experience by adding small visual and functional
niceties.

PROGRESSIVE
ENHANCEMENT
• Understanding Progressive Enhancement

http://www.alistapart.com/articles/understandingprogressiveenhancement
• Progressive Enhancement with CSS

http://www.alistapart.com/articles/progressiveenhancementwithcss
• Progressive Enhancement with JavaScript

http://www.alistapart.com/articles/progressiveenhancementwithjavascript

STRICT DOCTYPES
• To minimize the impact of IE6’s rendering problems, you

should always use Strict Doctypes:
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/
strict.dtd">
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/

xhtml1/DTD/xhtml1-strict.dtd">
• This ensures pages are rendered in Standards-Compliant

Mode, instead of the buggy Quirks Mode.

More information at: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
CONDITIONAL COMMENTS

CONDITIONAL COMMENTS
• These comments only work in the various versions of IE/

Windows, and all other browsers safely ignore them.
• They can be leveraged to provide alternate stylesheets or

scripts that fix IE-specific bugs.

TEST EARLY, TEST OFTEN!
• Never leave browser testing to the final stages of your project.
• Development should be iterative and complemented by a

testing stage at the end of each iteration.

IE BUGS
Which drive us absolutely bonkers!

BOX MODEL
• One of the most common bugs present in IE6 and below;
• IE will calculate the width of the box as being 100px;
• All other browsers will calculate a width of 124px;

BOX MODEL
• The best solution to this problem is to ensure rendering is

done in Standards-Compliant Mode;
• You can, however, avoid using padding in layout boxes and

instead use it directly on the elements inside the layout box
which need padding.

DOUBLE-MARGIN BUG
• When an element is floated in a direction, IE doubles the

margin value in that direction.
• In this example, the rendered margin would actually be 40px.

DOUBLE-MARGIN BUG
•A common solution is to add display: inline to the element, but

this is impractical (for instance, you can’t define a width or
height on an inline-level element)
• You can also try adding padding to the parent element to

achieve the desired effect.
• Or, instead of using margin-right, use padding-right. Padding is

not affected by this bug and may solve your problem.

MIN-WIDTH / MIN-HEIGHT
• Put bluntly, IE6 does not support min-height and min-width (!)
• However, if an element has a fixed height value and it’s

content grows out of bounds, IE6 stretches the container (!!)

MIN-WIDTH / MIN-HEIGHT
• This hack leverages the fact that IE6 does not understand
neither min-height nor !important;
• It establishes a minimum and auto height for the remaining

browsers, while leaving IE6 with a static height.

STEPDOWN
• Stepdown happens when several elements are floated in the

same direction.
• IE6 adds a line-break effect after each block-level element,

wrecking vertical alignment.

STEPDOWN
• One possible solution is to make sure the floated elements

are inline-level (display: inline forces this);
• Another solution is to set the line-height property of the

parent element to 0.

HOVER STATES
• IE6 only supports the pseudo-class :hover on anchor elements

(<a>) and, even still, only if they have a value for the href
attribute;
• There is a proprietary solution, but the best course of action is

to stick to anchor elements when applying hover effects.

TRANSPARENT PNG SUPPORT
• IE6 does not support 24-bit PNGs, that is, PNGs with a
transparent background.

TRANSPARENT PNG SUPPORT
• There are two good solutions:
• Using a .htc file (Twin Helix: IE PNG Fix)
• Or by using Javascript (24 Ways: Superslight e PNGHack on

Google Code)

HASLAYOUT
• hasLayout is an IE6 internal rule, which determines how

elements are positioned in relation to others;
• Activating hasLayout usually solves some common positioning

problems;
• Two of the most common solutions involve either setting the

height to 1% (which only works if the parent element has no
specified height) or by setting it position to relative.

THE END!

Learning To Love IE6

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Learning To Love IE6

Uploaded by

Copyright:

Available Formats

LEARNING TO LOVE IE6

OK, “LEARNING TO LIVE WITH IE6”

Tuesday, March 31, 2009

• We can assume we’re dealing with an average of 20% of IE6

• This figure can go up or down, depending on your specific

• So, before you start developing, get to know your audience!

Tuesday, March 31, 2009

Tuesday, March 31, 2009

• Originates from the principle of Graceful Degradation;

• However, it goes the opposite direction;

• You should provide a regular experience for users with dated

Tuesday, March 31, 2009

• However, for users with current browsers, you should provide

Tuesday, March 31, 2009

• Understanding Progressive Enhancement

• Progressive Enhancement with CSS

• Progressive Enhancement with JavaScript

Tuesday, March 31, 2009

• To minimize the impact of IE6’s rendering problems, you

• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/

• This ensures pages are rendered in Standards-Compliant

Tuesday, March 31, 2009

Tuesday, March 31, 2009

• These comments only work in the various versions of IE/

• They can be leveraged to provide alternate stylesheets or

Tuesday, March 31, 2009

• Never leave browser testing to the final stages of your project.

• Development should be iterative and complemented by a

Tuesday, March 31, 2009

Tuesday, March 31, 2009

• One of the most common bugs present in IE6 and below;

• IE will calculate the width of the box as being 100px;

• All other browsers will calculate a width of 124px;

Tuesday, March 31, 2009

• The best solution to this problem is to ensure rendering is

• You can, however, avoid using padding in layout boxes and

Tuesday, March 31, 2009

• When an element is floated in a direction, IE doubles the

• In this example, the rendered margin would actually be 40px.

Tuesday, March 31, 2009

•A common solution is to add display: inline to the element, but

• You can also try adding padding to the parent element to

• Or, instead of using margin-right, use padding-right. Padding is

Tuesday, March 31, 2009

• However, if an element has a fixed height value and it’s

Tuesday, March 31, 2009

• It establishes a minimum and auto height for the remaining

Tuesday, March 31, 2009

• Stepdown happens when several elements are floated in the

• IE6 adds a line-break effect after each block-level element,

Tuesday, March 31, 2009

• One possible solution is to make sure the floated elements

• Another solution is to set the line-height property of the

Tuesday, March 31, 2009

• IE6 only supports the pseudo-class :hover on anchor elements

• There is a proprietary solution, but the best course of action is

Tuesday, March 31, 2009

Tuesday, March 31, 2009

• There are two good solutions:

• Using a .htc file (Twin Helix: IE PNG Fix)

• Or by using Javascript (24 Ways: Superslight e PNGHack on

Tuesday, March 31, 2009