« | »

The Right Way to Reset CSS

Reset
Creative Commons License photo credit: Vanderlin

The problem is each browser sees margins, and padding differently.  Some browsers add a space between your page and the window.  This will make your page sit away from where you want it.  In order to make everyone see it the same you do a reset.

Bad CSS Reset

The most popular method and what I have used up until recently is:

* {
margin:0;
padding:0;
}

This has turned out to be a terrible way to reset a page.  It resets everything and makes you have to write more code then needed.  By using such an extreme reset the browser drops all its helpful spacing. With my favorite method out the window, what should I use instead?

Right CSS Reset

Everyone has their method for reseting css.  Different CSS Frameworks handle resets a little different.  The one that looks most interesting is the Meyer Reset. It takes most of the elements and strips them down to their bare essentials. This allows you the website guy… or gal, to build the site the way you want it.

I must admit this is not as quick as the method I have always used, but it makes designing easier.  I will not be able to code it without looking at my notes.

/* v1.0 | 20080212 */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

»crosslinked«

Tags: , ,

Category: CSS
Both comments and pings are currently closed.

2 Responses to “The Right Way to Reset CSS”

  1. Justin says:

    Wow, didn’t think it was that serious. Apparently it is. I’ll have to jot that down…

  2. Bryan says:

    Before recently, I have never used such a complete reset, but I ran into problems where the * reset to much and I had to re-code large portions of the CSS.

|

Flickr Photos

Quick Contact

Your Name (required)

Your Email

Your Message

captcha