Sezgi's Flashcard Portfolio

Portfolio XHTML / CSS 10 Startups
  • XHTML
  • open with doctype + namespace; use meta tag for char encoding
  • lowercase tags
  • quote attribute values
  • close all tags, including empty tags
  • Accessibility / Validation
  • provide text equivalents for non-text elements (e.g. use alt attribute on visuals)
  • make link texts independent of context
  • use tabindex
  • check page with no style
  • provide alternative content for applets, plug-ins, etc
  • Tables
  • no liquid layout / floats
  • no (clean) nesting
  • structure/content and presentation should be separate: more flexible, easier to maintain, cleaner (semantically clear, not code-heavy, etc), more accessible, open to new technologies, conserves bandwidth
  • tables are good for displaying row/column data
  • Bugs + Hacks
  • ie5 box model bug
    • Conditional comments, or
    • Star-html hack, or
    • Tantek hack
  • ie5win moving margins bug
    • zero height spacer divs, or
    • set width
  • ie6 & below: guillotine bug
    • place clearing div after content, or
    • :after pseudoclass (for non-IE) + Holly hack in CC
  • ie6 & below: unscrollable content bug
    • Holly hack in CC
  • ie6 & below: 3 pixel text-jog
    • Holly hack
  • ie6 peekaboo bug
    • Holly hack
  • star-html hack (Tan hack): filter hack for ie6 & below
  • commented backslash hack: hides rule from ie5mac
  • mac-only hack: hides rule from IEmac
  • IE7
  • star-html hack doesn't work
    • use CC
  • specifying height fixes Expanding Box Problem (so Holly hack doesnt work)
    • use zoom property in CC to trigger hasLayout
  • can hover on any element
  • supports fixed positioning
  • understands child selector: hack doesn't work
    • use CC, or
    • use "html>/**/body"
  • understands adjacent selector
  • understands first-child pseudo class
  • xml prolog won't force quirks mode
  • alpha channel on PNG images
  • fixed background attachment on any element
  • still expands boxes
  • hasLayout=true (IE)
  • if an element is relatively positioned without setting layout, content may disappear or be misplaced
  • make sure the parent of an absolutely positioned element has layout
  • When hasLayout=true:
  • boxes extend to contain floats
  • block elements stop wrapping around floats
  • elements make room for floats, even when they shouldn't (e.g. relatively positioned; ie6: percentage width)
  • floats do not overlay static elements (Float Model Problem)
  • ie5 & ie6 calculate percentage widths next to floats differently (Float Model Problem)
  • list markers disappear or get messed up; extra vertical space bw list elements (white-space bug, fixed in IE7)
  • background origin refers to padding edge (~w3c spec) not border edge
  • margin collapsing gets messed up
  • block anchors become clickable on not just text, but whole block area
  • shrink-wrapping broken bc of expanding hasLayout child (fixed in IE7)
  • negative-margined blocks in a hasLayout container get clipped
    • trigger hasLayout for protruding block, and for ie6 set "position: relative"
  • To set hasLayout to true:
  • set very small height - ignored by ie6 & lower bc of the Expanding Box Problem.
    • Holly hack in CC: "if lte IE 6" conditional comment with "height: 1px" + zoom property for ie7
  • for inline elements in standards mode ie6: "display: inline-block" ("zoom: 1" won't validate unless in CC)