dmy

About Reseting CSS Properties

written by admin 2708 days ago. Last update at 2013-04-02 16:29:26. Categories webdesign. Tags , .

Designing a layout using HTML/CSS is not a job for the faint hearted. Quit often there is a clash with built-in properties which are not consistent defined in all browsers. This led to the approach of using a style-sheet which resets CSS properties. The style-sheet populated by Eric Meyer, a rather well known CSS styling guru, is for example given here.

Eventually I would like to say that it did not work out for me. All too often I found myself trying to set the default values I have just discarded in my reset.css style-sheet. Ignoring inconsistencies for the moment, the I would like to state that usually all default properties are rather wisely chosen and contain exactly what you want when writing an article, a posting whatever.

Inconsistencies start to matter when designing a website. Then browser inconsistencies can have disastrous effects (like two divs are not side-by-side floated cause they don’t fit in the given width by perhaps just one pixel). However it’s just a small part of the website which needs precision rendering and not the whole website.

So, instead of setting the padding of all divs to be

div { padding: 1px 0; }  /* avoid margin collapsing */

I propose to reset only where it matters:

#header, [..], #footer, #header div, [..], #footer div, #content-main {
  padding: 1px 0; /* avoid margin collapsing */
}

Please notice that divs are reset in all grid elements except within #content-main (supposed to hold your page its informational content). Therein, default values are just fine.