CSS Tips

You can use to hide elements

    #navbar b {display:none;}

Explicitly declare line height because it is not standard across browsers.

  • IE treats height as though it were min-height
  • Add/subract whitespace to fix mysterious layout problems
  • Use similar code for landscape and portrait images
  • div.ls img
  • div.pt img
  • div.pic img
  • div.pic ul
  • div.pic

Miscellaneous Tips

  • Nice border design:
    border: 1px solid; border -color: #AAA #444 444 AAA;
  • Clear works by increasing the top margin of the cleared element until its outer top border edge is just below the bottom edge of previous floating elements.
  • Order for link styles: Link, Visited, Hover, Active (the reason is specificity)
  • To align an element on the right and top :
    position: absolute; top: 44px; right.0;
  • Adding padding to inline elements (ex. li or a) inside a div does not necessarily work, esp in IE. Add the padding to the div instead
  • Verdana has number glyphs that are all the same width
  • Vertical-align designed to work for table cells
  • Default line-height in browsers is 1.2 you should specify length.
  • Give a div auto for left and right margins and set the width -> center the div. But IE/win before IE6 improperly centred elements using text-align: center;
  • Cannot combine words and numbers in background-position. So left Opx is forbidden but 0 50px is not (you can use negative values)
  • text-align only applies to block-level elements (links are inline elements)

Bibliographical Information

More Eric Meyer on CSS
by Eric A. Meyer, ISBN 0-7357-1425-8
2004: New Riders, Berkely, California

These are notes I made after reading this book. See more book notes

Just to let you know, this page was last updated Monday, Mar 18 24