A Solid Foundation

The most frequently asked questions I have come across by web designers are related to the issues they are having making their designs appear the same in different browsers. The biggest contributor to these differences is in the default margin / padding that modern browsers place on page elements which widely vary, so to gain control over this we use the universal selector to make a change to all page elements. This can reduce the amount of CSS you use significantly.

* {
  margin: 0;
  padding: 0;
}

We also need a consistent font-size across browsers, to accomplish this I use the font-size keywords to obtain a solid font size across the board - delivering Internet Explorer 5.x a whole keyword step smaller than the rest due to it’s incorrect implementation of the sizing’s.

body {
    font-size: small;
}
* html body {
    font-size: x-small; /* for IE5 Win */
    f\ont-size: small; /* for other IE versions */
}
html>body {
    font-size: small; /* be nice to opera */
}

We then need to re-declare our margin/padding where we want it and set up our standard page elements - p, h1, h2, h3 ul, dl. Remember to use ems or percentages as our units for sizing text in the site - Setting these relative units allows all users to increase the font-size locally in their browsers, as designers we need to give them this freedom - some users need to increase the size of the font simply to be able to read the content so it is also a serious accessibility requirement.

p { font-size: 80%; padding: .4em 0; line-height: 1.8em; }
h1, h2, h3 { padding: 1em 0 .2em 0; }
h1 { font-size: 175%; }
h2 { font-size: 160%; }
h3 { font-size: 140%; }
ul, dl { font-size: 80%; padding: .5em 1em .5em 2em; }
ul li { line-height: 1.6em; }
img { border: 0; }

I start all my designs from this solid and flexible base.