SynopsisThis one-day advanced CSS training course aims to enable experienced web
designers to tackle and overcome the tricky problems which can make advanced
CSS techniques difficult to implement in a cost-effective manner. Delegates
will learn to diagnose, resolve and/or work around the most common problems,
bugs, and browser incompatibilities encountered in advanced CSS web design.
Expert instruction on these challenges is accompanied by best practice advice
on how to create elegant, managable and affordable CSS in timely fashion.
Prerequisites- Successful completion of our basic CSS training course ( Website
Design Using Cascading Stylesheet Standards ); or equivalent CSS training
and/or hands-on CSS experience
- The ability to code syntactically correct (i.e. valid) HTML/XHTML
- The ability to distinguish semantic
markup from a machine-coded pile ofs,s ands
Note:If you are unsure about whether your existing CSS skills,
knowledge or experience meet these criteria, please telephone 0870 200 7273 and
ask to speak to Dave Fisher (the course author). You can test the syntactical
accuracy of your HTML/XHTML by running your pages through the W3C's online HTML validator .
Course Contents Introduction to Advanced CSS
- Standards-based CSS versus Browser-based CSS
- Typical Compromises graphic appeal, usability, browser compatibility
- Basic Browser Compatibility versus Advanced Browser Compatibility
- Browser CSS Support IE6/IE7, IE5 for Mac, Firefox, Mozilla, Safari, Opera, etc.
- Advanced design goals quality and diversity through modularisation
- The Elephant Traps classic errors and problems in advanced CSS web design
Advanced CSS Browser Modes and Browser Detection
- Quirks Mode vs Standards Mode vs Almost Standards Mode
- Standards Mode and the Standard Box Model
- Standards Mode Selection by DOCTYPE
- Forcing IE into Standards Mode
- Barriers To Enforcing Standards Mode For XHTML
- Browser Detection And/Or Object Detection
- Browser Detection Tips
- Browser-specific CSS, Modular Stylesheets, Filters And CSS hacks
Advanced CSS Box Models
- A Recap of Key CSS Concepts normal flow, replaced-element, block-level element, inline element, root element, containing block
- The W3C Standard Box Model
- Windows IE Box Models (Width)
- Windows IE Box Model (Height)
- Managing the IE/Win Box Model in CSS
- Forcing W3C Standard Widths In IE/Win
- The Tan Hack A Reliable CSS Hack?
Advanced CSS Float Models
- Typical Problems With Floats in CSS
- Standards Vs IE Float Models
- The Standard Float Model
- The IE Float Model
- Clearing a Float Within Its Container
- Uncontained Floats the Standard Default
- Clearing a Float withafter
- How Clearance Works in CSS2.1
- Floats, Content and Overlapping
- Over-Wide Replaced Content in Floated Containers
- Over-Wide Images In Floats
Automatic Box Sizing in Advanced CSS
- Setting Heights and Widths withauto
- autoWidth Properties in CSS
- autoHeight Properties in CSS
- autofor Basic Horizontal Sizing
- More Than One HorizontalautoSetting
- autoand Percentage Box Sizing Gotchas
Advanced CSS Positioning and Offsets
- Recap on CSS Positioning Types static positioning, relative positioning, absolute positioning, and fixed positioning
- The Containing Block and the Parent Block
- The Containing Block For Absolute Elements
- CSS Positioning Using Offsets versus Width and Height
- Width and Height in CSS Positioning
- Minimum and Maximum Dimensions Standard CSS Properties (min-width,max-width,min-height,max-height) versus IE Default Behaviour
Common Browser Bugs and Common CSS Problems
- The Most Common Problems in Everyday Practice
- Valid CSS and Valid HTML
- MIME Types
- Media Type Glitches
- FOUC The Flash of Unstyled Content
- Source Code Whitespace Not Ignored
- Resource Paths
- IE Text Size Bug
- Link Pseudo-Class Order (LVHA)
- Unintentionally Styled Anchors
- List Zeroing
- Missing Floats
- Unclickable Links
- Ignored Top Margins
- Protruding Top and Bottom Margins
- Protruding Floats in IE
- The Holly Hack
- The 3 Pixel Jog (Text Jog, 3 Pixel IE Bug)
- The 1 Pixel Rounding Error (Not a Bug)
- The Peek-a-Boo Bug
- Peekaboo Bug Fixes
- The WinIE Guillotine Bug
- Guillotine Bug Fixes
- The IE Click Bug
- The IE Justified Italics Bug
- The Windows IE Unscrollable Content Bug
- The IE Double Float Margin Bug
- The WinIE Creeping Text Bug
- The IE6 Duplicate Character Bug