WTC: CSS Training Courses

Cross-Browser Compatibility

A 1-day Advanced CSS Training Course in Bulletproof Web Design

Course Overview

Advanced CSS training course providing the following technical skills and knowledge:

  • Diagnose common compatibility problems
  • Identify the common underlying causes behind dozens of visually different errors
  • Understand how and why layout dimensions vary between browsers
  • Understand how and why floats behave differently in some browsers
  • Understand the cause and effects of problems associated with IE's hasLayout property

Broader objectives of this Advanced CSS training course:

  • Save time on initial website development
  • Do away with 'trial and error' debugging
  • Design out maintenance and upgrade problems
  • Cleaner, faster, more concise CSS and HTML

Course Contents:

Cross-Browser Compatibility (CSS-05)

Managing standard and non-standard box models

  • 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

IE floats versus the standard float model

  • 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

Advanced CSS: IE’s hasLayout Property — The Hidden Source of Most Problems

  • 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

Advanced CSS: Common Problems, 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

Positioning and Auto Dimensions

An optional module — if time permits

  • Static positioning
  • Absolute positioning
  • Absolute positioning with layers — non-standard stacking
  • Fixed positioning
  • Relative positioning
  • What relative positioning is really for
  • Understanding offsets in CSS positioning
  • The containing block varies for absolute elements
  • Problems with absolute offsets
  • Offsets and the box model
  • Problems with width and height in CSS positioning
  • Using maxima, minima and percentages
  • Using auto dimensions
  • Horizontal auto dimensions
  • Auto margins for centring
  • More than one horizontal auto Setting
  • Vertical auto dimensions

Target Audience

  • Experienced web developers
  • Experienced web designers
  • Usability, accessibility, and SEO professionals who get their hands on the code

Pre-requisites

Both of the following:

  • CSS training course 1 (CSS1) — or equivalent experience
  • HTML training course 1 (HTM1) or equivalent experience

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

Course Schedule

  • Tue, 13 March 2012 in London, £250
  • Fri, 13 April 2012 in London, £250
  • Fri, 11 May 2012 in Leeds, £250
  • Tue, 15 May 2012 in London, £250
  • Thu, 14 June 2012 in London, £250
  • Thu, 12 July 2012 in Leeds, £250
  • Tue, 17 July 2012 in London, £250
  • Thu, 9 August 2012 in London, £250
  • Thu, 6 September 2012 in Leeds, £250
  • Tue, 11 September 2012 in London, £250
  • Thu, 11 October 2012 in London, £250
  • Thu, 8 November 2012 in Leeds, £250
  • Tue, 13 November 2012 in London, £250
  • Thu, 6 December 2012 in London, £250