Learning To Love IE6


Published on

A presentation highlighting a set of good practices and ways around common IE6 problems.

Published in: Design, Technology
  • Be the first to comment

Learning To Love IE6

  1. 1. LEARNING TO LOVE IE6 Bruno Abrantes bruno@brunoabrantes.com Monday, March 30, 2009
  2. 2. View the whole table at: http://www.w3schools.com/browsers/browsers_stats.asp OK, “LEARNING TO LIVE WITH IE6” Monday, March 30, 2009
  3. 3. TARGET AUDIENCE can assume we’re dealing with an average of 20% of IE6 • We users. • This figure can go up or down, depending on your specific target audience. you start developing, get to know your audience! • So, before Monday, March 30, 2009
  4. 4. Imagem retirada de http://alistapart.com PROGRESSIVE ENHANCEMENT Monday, March 30, 2009
  5. 5. PROGRESSIVE ENHANCEMENT • Originates from the principle of Graceful Degradation; goes the opposite direction; • However, it should provide a regular experience for users with dated • You browsers. Monday, March 30, 2009
  6. 6. PROGRESSIVE ENHANCEMENT • However, for users with current browsers, you should provide an enhanced experience by adding small visual and functional niceties. Monday, March 30, 2009
  7. 7. 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 Monday, March 30, 2009
  8. 8. STRICT DOCTYPES • To minimize the impact of IE6’s rendering problems, you should always use Strict Doctypes: <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/ • strict.dtdquot;> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/ • xhtml1/DTD/xhtml1-strict.dtdquot;> ensures pages are rendered in Standards-Compliant • This Mode, instead of the buggy Quirks Mode. Monday, March 30, 2009
  9. 9. More information at: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx CONDITIONAL COMMENTS Monday, March 30, 2009
  10. 10. 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. Monday, March 30, 2009
  11. 11. TEST EARLY, TEST OFTEN! • Never leave browser testing to the final stages of your project. should be iterative and complemented by a • Development testing stage at the end of each iteration. Monday, March 30, 2009
  12. 12. IE BUGS Which drive us absolutely bonkers! Monday, March 30, 2009
  13. 13. BOX MODEL • One of the most common bugs present in IE6 and below; will calculate the width of the box as being 100px; • IE other browsers will calculate a width of 124px; • All Monday, March 30, 2009
  14. 14. 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. Monday, March 30, 2009
  15. 15. DOUBLE-MARGIN BUG an element is floated in a direction, IE doubles the • When margin value in that direction. this example, the rendered margin would actually be 40px. • In Monday, March 30, 2009
  16. 16. DOUBLE-MARGIN BUG common solution is to add display: inline to the element, but •A 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 • You achieve the desired effect. of using margin-right, use padding-right. Padding is • Or, instead not affected by this bug and may solve your problem. Monday, March 30, 2009
  17. 17. MIN-WIDTH / MIN-HEIGHT bluntly, IE6 does not support min-height and min-width (!) • Put • However, if an element has a fixed height value and it’s content grows out of bounds, IE6 stretches the container (!!) Monday, March 30, 2009
  18. 18. 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 • It browsers, while leaving IE6 with a static height. Monday, March 30, 2009
  19. 19. STEPDOWN happens when several elements are floated in the • Stepdown same direction. adds a line-break effect after each block-level element, • IE6 wrecking vertical alignment. Monday, March 30, 2009
  20. 20. 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 • Another parent element to 0. Monday, March 30, 2009
  21. 21. HOVER STATES only supports the pseudo-class :hover on anchor elements • IE6 (<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. Monday, March 30, 2009
  22. 22. TRANSPARENT PNG SUPPORT does not support 24-bit PNGs, that is, PNGs with a • IE6 transparent background. Monday, March 30, 2009
  23. 23. SUPORTE PARA PNG TRANSPARENTES • There are two good solutions: a .htc file (Twin Helix: IE PNG Fix) • Using by using Javascript (24 Ways: Superslight e PNGHack on • Or Google Code) Monday, March 30, 2009
  24. 24. 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. Monday, March 30, 2009
  25. 25. THE END! Monday, March 30, 2009