I've noticed a lot of IE6 Bashing among the developer community lately.  While I've certainly been through my share of suffering, after designing and building websites professionally for the past ten years I've learned to deal.  I'll not debate JavaScript DOM support, or lack thereof, as that is another issue entirely. 

Instead, this article offers a few tips and some high level declarations as a starting point that will help you write less CSS and spend less time re-working your CSS to work in IE. 

Starting out:

This is a common CSS template I start with:

body, html{
     margin:0; padding:0;
     height:100%;
}

div, p{
    position:relative;
    margin:0; padding:0;
    overflow:hidden;
}

br{
    clear:both;
}

What does this accomplish?

First, it will extend your background images all the way to the bottom of the screen and eliminate the default margins and padding on the page (html, body block declaration).

Second, it saves you the trouble of declaring position:relative over and over again. While relative and block display are the supposed defaults CSS declarations for margin, top, and left won't be respected without an explicit position:relative specified in the style block.  In the next section you'll see why this is important for cross-browser CSS. The overflow is also hidden by default because often an inner element's height, padding and margin will cause their parent element to extend beyond the desired height.

Lastly, the br block will cause any <br /> tags to automatically clear floated elements.  If you're producing CSS layouts with columns you'll quickly notice how handy this becomes. 

Cross-Browser CSS Tips

The best way to create cross-browser CSS productions the first time (without even looking at IE) is to avoid using any code that the two handle differently.

The first and most important difference can be avoided by NEVER specifying horizontal margins or padding for layout elements.  IE will add the margin/padding dimensions to the width you specify while Mozilla will not, thereby causing your column widths to be inconsistent.  But what if nested layers require horizontal positioning?  For example, you may need to render some content within the borders of a background texture or shadow image. The cross-browser solution? Use top, left, and right to position them.  Because IE and Mozilla handle these declarations the same way, you're in the clear.

Second, be sure to use absolute positioning whenever possible. If you require flexible column height obviously this won't work. However, when positioning anything at all satic, you'll be glad you did!