You are on page 1of 25

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”
Tuesday, March 31, 2009

TARGET AUDIENCE
• We

can assume we’re dealing with an average of 20% of IE6 users. figure can go up or down, depending on your specific target audience. you start developing, get to know your audience!

• This

• So, before

Tuesday, March 31, 2009

Image from http://alistapart.com

PROGRESSIVE ENHANCEMENT
Tuesday, March 31, 2009

PROGRESSIVE ENHANCEMENT
• Originates

from the principle of Graceful Degradation; goes the opposite direction;

• However, it • You

should provide a regular experience for users with dated browsers.

Tuesday, March 31, 2009

PROGRESSIVE ENHANCEMENT

• However, for

users with current browsers, you should provide an enhanced experience by adding small visual and functional niceties.

Tuesday, March 31, 2009

PROGRESSIVE ENHANCEMENT
• Understanding • Progressive • Progressive

Progressive Enhancement

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

Enhancement with CSS Enhancement with JavaScript

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

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

Tuesday, March 31, 2009

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.

Tuesday, March 31, 2009

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

CONDITIONAL COMMENTS
Tuesday, March 31, 2009

CONDITIONAL COMMENTS

• These

comments only work in the various versions of IE/ Windows, and all other browsers safely ignore them. can be leveraged to provide alternate stylesheets or scripts that fix IE-specific bugs.

• They

Tuesday, March 31, 2009

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.

Tuesday, March 31, 2009

IE BUGS
Which drive us absolutely bonkers!
Tuesday, March 31, 2009

BOX MODEL

• One • IE

of the most common bugs present in IE6 and below;

will calculate the width of the box as being 100px; other browsers will calculate a width of 124px;

• All

Tuesday, March 31, 2009

BOX MODEL

• The

best solution to this problem is to ensure rendering is done in Standards-Compliant Mode; can, however, avoid using padding in layout boxes and instead use it directly on the elements inside the layout box which need padding.

• You

Tuesday, March 31, 2009

DOUBLE-MARGIN BUG

• When

an element is floated in a direction, IE doubles the margin value in that direction. this example, the rendered margin would actually be 40px.

• In

Tuesday, March 31, 2009

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) can also try adding padding to the parent element to achieve the desired effect. of using margin-right, use padding-right. Padding is not affected by this bug and may solve your problem.

• You

• Or, instead

Tuesday, March 31, 2009

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 (!!)

Tuesday, March 31, 2009

MIN-WIDTH / MIN-HEIGHT

• This

hack leverages the fact that IE6 does not understand neither min-height nor !important; establishes a minimum and auto height for the remaining browsers, while leaving IE6 with a static height.

• It

Tuesday, March 31, 2009

STEPDOWN

• Stepdown

happens when several elements are floated in the same direction. adds a line-break effect after each block-level element, wrecking vertical alignment.

• IE6

Tuesday, March 31, 2009

STEPDOWN

• One

possible solution is to make sure the floated elements are inline-level (display: inline forces this); solution is to set the line-height property of the parent element to 0.

• Another

Tuesday, March 31, 2009

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; is a proprietary solution, but the best course of action is to stick to anchor elements when applying hover effects.

• There

Tuesday, March 31, 2009

TRANSPARENT PNG SUPPORT

• IE6

does not support 24-bit PNGs, that is, PNGs with a transparent background.

Tuesday, March 31, 2009

TRANSPARENT PNG SUPPORT

• There • Using • Or

are two good solutions: a .htc file (Twin Helix: IE PNG Fix)

by using Javascript (24 Ways: Superslight e PNGHack on Google Code)

Tuesday, March 31, 2009

HASLAYOUT
• hasLayout

is an IE6 internal rule, which determines how elements are positioned in relation to others; problems; hasLayout usually solves some common positioning

• Activating

• 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.

Tuesday, March 31, 2009

THE END!
Tuesday, March 31, 2009