Notes
Slide Show
Outline
1
Differences between
IE6 and IE7



  • Mat Mirabella
  • Principle Accessibility / Human Factors Specialist
  • Melbourne – Australia
  • Mathew.Mirabella@team.telstra.com



2
Overview

  • Standards Compliance


  • IE GUI Application Differences


  • IE Accessibility Features


  • CSS Differences
    • How to send different CSS to IE
    • “Quirks” versus “Strict” Modes
    • The CSS “Box Model”
3
Standards compliance

  • IE 7 behaves more like Firefox than IE 6


  • IE7 is more compliant to UAAG than is IE 6


  • IE 7 complies better to CSS and other rendering standards than IE 6


  • IE 7 has been architected to work better with AT than IE 6


  • But there are some differences to watch out for…
4
IE GUI Application Differences

  • IE 7 Tabbed browsing
    • Many pages open at once navigable via “tabs” across the window

  • IE 7 Integrated RSS reader and aggregator


  • IE 7 has a new toolbar and menu layout
    • Hidden menu bar by default
    • F6 to move to address bar, not included in tab order

  • IE 7 Quick Tabs
    • Ctrl-q – page of thumbnails of your tabs

  • Easy tool to purge cookies, history and temporary files in the one dialog


  • Search engine management
    • Add any search engine to the toolbar

  • Protection against “fishing” attacks
    • When sites trick users to log on and give personal information

  • Also note… Firefox 2 is similarly Featured
5
IE Accessibility Features

  • 1.  Text Size
      • smallest - small - medium - large - largest

    • IE 6
      • Changes text content size only
      • Activate via menus or Ctrl-MouseWheel
      • Doesn’t work if sizes are specified as absolute values

    • IE 7
      • Same as IE 6 except not controlled by mouse wheel
      • Mouse wheel now used for “Zoom” function …
6
IE Accessibility Features
  • Cont…
  • 2.  Zoom In
      • Up to 1000% magnification of page content

    • IE 6
      • Not available by default

    • IE 7
      • Changes size of text, images and controls
      • Activate via icons or Ctrl-MouseWheel
      • Enlarges regardless of CSS relative vs. absolute
      • Truly magnifies - forces horizontal scrolling
7
IE Accessibility Features
  • Cont…
  • 3.  Colours and fonts
      • Via accessibility options in tools--options

    • IE 6
      • Set fonts and colours for links, foreground and background
      • Can set to ignore colours specified on web pages
      • Can follow Windows Desktop Themes to some extent
      • Can specify your own CSS Style sheet

    • IE 7
      • Same as IE 6
      • Also supports system link colour so high contrast modes work properly
8
IE Accessibility Features
  • Cont…
  • 4.  Advanced features
      • IE tools---options--advanced

    • IE 7
      • Reset text size to medium for new windows and tabs
      • Reset zoom level to 100% for new windows and tabs

  • 5.  Enhanced keyboard access
      • Default toolbar buttons
      • Search box items
      • Address bar and tabs
      • Added to new features
9
CSS Differences

  • 1.  IE7 understands the child selector
      • Html>body

    • IE 6 ignores the child selector so hacks can be used to:
      • Hide CSS from IE6
      • Deliver different CSS to IE6

  • 2.  IE7 does not understand the * html hack
      • * Html
    • Wildcard that means rule applies to every nested element
    • Shows some CSS to IE 6 but not other browsers

  • Both hacks will not work for IE7
10
How to send different CSS to IE7?

  • Use conditional comments in the HTML
    • E.g. in the HEAD of the document under the LINK element calling up the CSS


      • <!--[if IE 7]><link rel="stylesheet" type="text/css" href="IE7styles.css" /><![endif]-->

    • This CSS file need only have new commands or ones that override
11
CSS Differences
  • Cont…
  • 3.  XML prolog won’t force “quirks” mode in IE 7
      • <?xml version="1.0" encoding="iso-8859-1"?>

    • Prolog appears on First line of an XHTML file followed by DOCTYPE
    • IE 6 reverts to "quirks" mode if DOCTYPE is not found on the first line of the file
    • IE 7 will not revert to “quirks” mode, instead rendering in “standards/strict” mode

  • What are the differences between “quirks” and “strict” modes? …
12
“Quirks” versus “Strict” Modes

  • Quirks mode incorrectly calculates the CSS “box model”
    • Padding and border are placed inside the content area

  • Can result in huge differences in how content appears
13
The CSS “Box Model”

  • Content = height and width values
  • Padding = has width
  • Border = width/styles/colors
  • Margin = has width


  • Quirks mode in IE 6:
    • Padding/border widths
      • Inside width/height of
      • Content area
14
CSS Differences
  • Cont…
  • 4.  A number of CSS bug fixes in IE 7


  • 5.  More support for CSS features
    • “hover” will work on all elements, not just links
    • CSS Dropdown menus can be done in IE7 without JavaScript
15
Recap of Overview

  • Standards Compliance


  • IE GUI Application Differences


  • IE Accessibility Features


  • CSS Differences
    • How to send different CSS to IE
    • “Quirks” versus “Strict” Modes
    • The CSS “Box Model”
16
Some References

  • Accessibility at Microsoft, Home
  • http://www.microsoft.com/enable/


  • Accessibility in Internet Explorer 7
  • http://www.microsoft.com/enable/products/IE7/default.aspx


  • Preparing your CSS for Internet Explorer 7
  • http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer-7.shtml


  • Box model – W3C
  • http://www.w3.org/TR/CSS21/box.html


  • The (Overhyped) Web Browser War: Internet Explorer 7 vs. Firefox 2.0 - Popular Mechanics
  • http://www.popularmechanics.com/blogs/technology_news/4200422.html