General Purpose Style Sheet

Last updated: 20071205

Here is a general purpose, cross-browser compatible, CSS stylesheet I use when kicking off a new project. I chucked it up in functional units, merged into a single stylesheet at the bottom.
This post may change over time, when new quirks come to light.
Suggestions greatly appreciated!

You might also be interested in the stylesheet of Faruk Ateş.

Resizable Font-size

This trick is ripped from an article on A List Apart

<!-- RESIZABLE TEXT -->

<!-- stylesheet for all browsers -->
<style type="text/css">
body {
    font-size:16px;  /* @resizable text: best cross-browser default value */
    line-height:1.125em; /* @resizable text: 16x1.125em=18px */
}

.exampleClass p {
    font-size:0.875em;  /* @resizable text: 16x0.875em=14px */
}

</style>

<!-- stylesheet with bugfixes for IE -->
<!--[if IE]>
<style type="text/css">
body {
    font-size:100%;  /* @resizable text: fix exaggerated text resizing in IE6 & IE7 */
}
</style>
<![endif]-->

<!-- END RESIZABLE TEXT -->

100% height

<!-- 100%height -->

<!-- stylesheet for all browsers -->
<style type="text/css">
html,
body {
    height:100%; /* @100%height: body & html don't have 100% height by default */
}
body{
    margin:0;  /* @100%height: for Opera /*
    padding:0;  /* @100%height: for all but opera /*
}
</style>

<!-- END 100%HEIGHT -->

IE PNG FIX

See this post for info on this chunk.

<!-- IEPNGFIX -->

<!-- hide from other browser than IE<7 -->
<!--[if lt IE 7]>
<style type="text/css">
img, div { behavior: url(iepngfix.htc) } /* @IEPNGFIX */
</style>
<![endif]-->

<!-- END IEPNGFIX -->

IFRAMEBORDERS

In IE(6) the border of iframes can only be hidden by setting the border property in the css of the iframe content document.

<!-- IFRAMEBORDERS -->

<!-- stylesheet with bugfixes for IE -->
<!--[if IE]>
<style type="text/css">
body {
    border:none;  /* @iframeborders */
}
</style>
<![endif]-->

<!-- END IFRAMEBORDERS -->

All merged to one

<!-- stylesheet for all browsers -->
<style type="text/css">
html,
body {
    height:100%;  /* @100%height: body & html don't have 100% height by default */
}

body {
    font-size:16px;  /* @resizable text: best cross-browser default value */
    line-height:1.125em; /* @resizable text: 16x1.125em=18px */
    margin:0;   /* @100%height: for Opera /*
    padding:0;   /* @100%height: for all but opera /*
}

.exampleClass p {
    font-size:0.875em;  /* @resizable text: 16x0.875em=14px */
}

</style>

<!-- stylesheet with bugfixes for IE (all versions) -->
<!--[if IE]>
<style type="text/css">
body {
    font-size:100%;  /* @resizable text: fix exaggerated text resizing in IE6 & IE7 */
    border:none;  /* @iframeborders */
}
</style>
<![endif]-->

<!-- stylesheet with bugfixes for IE versions lower than 7 -->
<!--[if lt IE 7]>
<style type="text/css">
img, div { behavior: url(iepngfix.htc) } /* @IEPNGFIX */
</style>
<![endif]-->