Old Browser Compatibility

1-day Advanced CSS Training Course in Web Design for Older IEs — CSS-05

CSS TrainingCourse Overview

This advanced CSS course should not exist. It is designed solely for those organisations which continue to maintain software that depends on the IE6-7 rendering engine (or depends on compatibility modes in newer IEs) for its user interfaces.

  • Diagnose common IE6-7 compatibility problems
  • Identify common causes of visually different 'IE bugs'
  • Understand how and why IE6-7 dimensions do not match standard browsers
  • Understand how and why floats behave like inline-blocks in IEs 6-7
  • Understand the cause and effects of problems associated with IE's hasLayout property

Broader objectives of this Advanced CSS training:

  • Allow sites to continue supporting IE6, IE7, etc
  • With out wasting time on 'special measures'
  • Do away with 'trial and error' debugging

Please note that this course is now virtually retired. We continue to list it on our website, only because a small number of UK government departments and big corporations were silly enough to lock some of their software to the non-standard IE6 rendering engine back in the early noughties. And a very small number of them have still not fully escaped the consequences of that decision.

CSS TrainingCourse Contents

The non-standard box model in older IEs

  • Browser-based CSS vs. standards-based CSS
  • Progressive enhancement and graceful degredation
  • Modularisation: quality and diversity in advanced CSS
  • Classic errors and problems in advanced CSS: the elephant traps
  • Standards Mode vs Quirks Mode CSS rendering
  • The CSS standard box model versus the IE box model
  • Managing the IE Box Model; some alternatives:
    • Avoid the width property — using marginal offsets
    • Padding and border effects without the padding and border properties
    • Creating ‘rubber space’ with auto dimensions — dodge pixel rounding errors
    • Getting IE6 & IE7 into standards mode
    • XHTML and standards mode
    • Compatibility modes in IE8+IE9 — not recommended
    • CSS hacks for ancient IEs
    • The Tan Hack and the Holly Hack
    • Using conditional styles to manage IE quirks
    • Using conditional comments to serve alternate style sheets
    • Version-specific styling for different IEs
    • Style switching via browser detection and object detection
    • Bug fixes and feature enhancement with IE7-js, IE8-js and IE9-js
    • Some hacks for current browsers

Non-standard floats in older IEs

  • Recap: how floats should behave — incl. the bits most people overlook
    • Float interaction with ‘normal flow’
    • Float interaction with inline content
    • Floats interaction with block level content
  • IE floats without the hasLayout property
  • IE floats when hasLayout is set
  • hasLayout’s effect on non-floated blocks
  • Standards browsers render non-floated blocks identically:
    • Examples from Chrome, Opera, Firefox & Safari
  • Float and non-float interaction varies across different IE versions:
    • IE8, IE7, IE6, IE5
  • Over-long vertical content in floats
    • How it should interact with later content
    • How IE differs when hasLayout is set
    • How standards browsers conform
  • Over-wide horizontal float content
    • How it should interact with adjacent content
    • How IE differs when hasLayout is set
    • How standards browsers conform
  • Correct float wrapping (encapsulation)
    • IE relies on hasLayout do do it
    • Float wrapping the CSS way — using the :after pseudo-class
    • Empty divs — a deprecated hack
  • Excessive replaced content (e.g. images) in floats
  • Some rare problems clearing floats

IE’s hasLayout Property — The Source of all Evil

  • Defining hasLayout: what it is and what it does
  • Recognising the symptoms of hasLayout
  • Elements with hasLayout by default
  • Properties which trigger hasLayout (all IEs)
  • Properties which trigger hasLayout in IE>6
  • hasLayout effects on inline elements
  • Resetting or Cancelling hasLayout
  • Detecting hasLayout programmatically
  • Fixing IE bugs by setting hasLayout

Common Problems in Older IEs: Bugs and Fixes

  • Common problems in CSS
  • Using validators
  • Other test tools
  • List bugs — zero CSS defaults
  • Should all browser defaults be reset?
  • IE’s protruding floats
  • The 3 Pixel Jog (Text Jog, 3 Pixel IE Bug)
  • The Peek-a-Boo Bug
  • The ‘Guillotine Bug’
  • Unclickable links
  • Unscrollable content
  • Creeping text and stair-stepping bugs
  • The ‘duplicate character bug’
  • The ‘double margin bug’ on floats
  • When whitespace in source code is not ignored
  • ‘invisible’/‘missing’ floats
  • LVHA order for link pseudo-classes
  • Media type problems
  • Temporally unstyled content
  • Paths for background images
  • IE Text Size Bug
  • Problems with vertical margins on containers
  • Pixel rounding errors
  • Problems with italics and justification

CSS TrainingFurther Details

Course Objectives

The overwhelming aim of this course is to save designers time and grief, e.g. by enabling them to support popular, but broken, legacy browsers like IE6 and IE7 — without spending 80+% of their time on the task.

On completion of this advanced CSS training course students will be able to:

  • Understand and remove cross-browser differences in float based-layouts
  • Understand how virtually every IE6+IE7 compatibility issue is just a particular effect of two non-standard IE features, i.e.
    • IE6 and IE7 quirks modes
    • The proprietary layout box property called hasLayout
  • Recognise the visual symptoms of IE's quirks mode and hasLayout bugs
  • Understand and deploy well known workarounds for these IE bugs
  • Isolate and locate the origin of bugs in HTML and CSS source code
  • Set/unset hasLayout on arbitrary page components

Target Audience

Experienced web designers and developers who still need to maintain software which depends on IE6-7 or upon compatibility modes which continue to support their broken box CSS models in IE8 and above.

Training Pre-requisites

Both of the following web design courses — or equivalent experience

Training Style

This advanced CSS course delivers a large amount of content to an expert audience within a relatively small amount of time (1 day).

As a consequence, the proportion of time devoted to instruction tends to be greater than it is on most of our courses and hands-on practical work is reduced to a necessary minimum.

To compensate for this imbalance, the course manual provides additional exercises for students to practice at home, and the tutor will provide free follow-up support to anyone struggling with those exercises.