Predefined CSS rules in most browsers

Posted By Predrag on June 26, 2006

Each and every time I start working on a new (X)HTML / CSS project - same problems turn up. As you probably know, every browser has some predifined CSS rules that you might need to override in order for your page to appear correctly on most of them. I say most of them because some of them I consider as waste of time (IEs older than 5, Netscape 4, etc. and their long lost relatives). While reading one cool and very useful article about prototype coding, led by few clicks I got this W3C page in my favorite browser (use Firefox!) I found very useful. It explains what rules most of browsers apply as they default CSS. Even the page states that the list is informative, not normative, I found points where should I focus my attention while overriding defaults.

As you can see below, I dig through that W3C page and copy pasted most used (X)HTML elements (I skipped some I never heard before) in more organized way - so I can print them out on single piece of paper I’ll keep on my desk in the future. Here is the list:

body {
   display: block;
   padding: 8px;
   line-height: 1.33;
}
div {
   display: block;
   margin:0px;
   padding:0px;
}
p {
   margin: 1.33em 0
}
ul, ol {
   display: block;
   margin: 1.33em 0;
   margin-left: 40px
}
th {
   font-weight: bold;
   text-align: center
}
caption {
   text-align: center
}
h1 {
   display: block;
   font-size: 2em;
   margin: .67em 0;
   font-weight: bold;
}
h2 {
   display: block;
   font-size: 1.5em;
   margin: .83em 0;
   font-weight: bold;
}
h3 {
   display: block;
   font-size: 1.17em;
   margin: 1em 0;
   font-weight: bold;
}
h4 {
   display: block;
   margin: 1.33em 0;
   font-weight: bold;
}
h5 {
   display: block;
   font-size: .83em;
   line-height: 1.17em;
   margin: 1.67em 0;
   font-weight: bold;
}
h6 {
   display: block;
   font-size: .67em;
   margin: 2.33em 0;
   font-weight: bold;
}
blockquote {
   display: block;
   margin-left: 40px;
   margin-right: 40px
}
dl {
   display:block;
   margin: 1.33em 0;
}
dt {
   display:block;
}
dd {
   display:block;
   margin-left: 40px
}

These are only the most used. Apart from this, you should always kill predifined FORM margin and padding values since IE iapplies them (and ruins my page). I’m sure there are some IE margins for BODY too, so pay attention on them. body {margin:0} won’t kill you.

For complete list of suggested predefined values visit http://www.w3.org/TR/REC-CSS2/sample.html.

About the author

Predrag

Few years ago, his key goal was to create 100% cross-browser pixel-precise pages - now he bothers us with Web 2.0 concept and clean W3C compliant code. One way or another he's a pain.

Comments

One Response to “Predefined CSS rules in most browsers”

Trackbacks

  1. Abdominal belts  on May 14th, 2008 @ 4:32 am

Add a Comment