back to CATS home


CalWac2: Advanced Topics in CSS

User: kristin
Date: 4/25/2007 3:24 pm
Views: 110269
Rating: 126    Rate [





By Jon Wiley - A lot of information is packed into a short amount of time. Below is an outline. Detailed information on this session can be found at

Review CSS Toolkit

  • A list of CSS resources were provided, which can be found in the class outline.
  • Recommended testing pages in IE7 at this point
  • Use IE toolbar from Vision Austraila to help with CSS testing in IE:


Use the fewest amount of classes and ids possible


  • More specificity wins over cascade (see slide)
  • !important trumps everything – avoid. Don’t use to overcome specificity in other areas in document.
  • If style element isn’t working for some reason, check specificity in css code


  • Display:none vs. visible:hidden:  None yanks content out of document flow. Can cause challenge in screenreaders – some will not read content. Visibility:hidden leaves content within document flow – some screenreaders will not read visibility hidden. Test.


  • Avoid using if you don’t have to. Usually don’t need it. Causes problems in ie.
  • Position is often used with top and left
  • Relative starts in normal flow, but offsets if from what you specify
  • Absolute: renders object offset from the top and left of it’s parent. Yanked out of normal flow.
  • Fixed: stays in one place once its rendered. Takes cue of offset from entire browser window. Can move content, but object stays place relative to window ) (doesn’t work in ie)


  • Maintains block-like qualities. Behaves like inline element, no line breaks above and below. Objects do not expand to hold their floats unless they themselves are floated.
  • Assign display:block to left-floated items in IE so that ie doesn’t double the left margin (for more info, look up IE Double Left Margin in Google).
  • Importance of linear organization of content. Should be that the meat of the page is first, no matter what layout. (ex. Float content to right or left to display content that is ordered differently in source by priority – content, navigation, other content, etc.).

More tips...

Specify width of object in ems, layout will grow and shrink according to font size.

Dropdown menus: Avoid 2nd or 3rd level dropdown for usability/accessibility perspective. Need js for ie dropdowns - IE doesn’t recognize hover on anything but anchor tags.

Creating professional looking printed graphic:
Use CSS to format print style sheet to display large image on screen, but print small so they come out looking sharp and professional (see logo example at

One background image used for every button – different
states. See example at
Minimizes hits to server.
Use as background image.
Anchor: float to create block-style and set height and

Bubble tooltips
Use CSS to create bubble tooltips. See example at