Old Browser Compatibility

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

CSS Training Course 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.

Course contents — 1 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

Course contents — 2 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

Course contents — 3 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

Course contents — 4 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

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.