Predefined CSS rules in most browsers June 26, 2006

Posted by Predrag in : Web Design , trackback

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.

Comments»

1. Abdominal belts - May 14, 2008

Abdominal belts…

Cool article…