Posts Tagged ‘cross-browser’

CSS Reset: Level the Playing Field

Tuesday, March 16th, 2010

Whenever I develop the css code for website layouts I always start with a reset. Each Browser “imposes” its own default style sheet onto your work, so you can level the playing field by tearing down their defaults. There are many ways to do this and varying levels of detail that can really make your cross browser coding more accurate.

Personally, I stick to pixel precision in some, but not all areas. I typically let inline elements like text, do their own thing.

Here is the code that I begin with at the start of my main stylesheet:

* {
margin:0;
padding:0;
}

This typically gives you the most bang for your buck as far as creating a smooth surface to start building your styles on.

I also like to add this:

a img {
border:none;
}

I get annoyed how browsers automatically put the border around images, especially if used for navigation, like a logo or button.

If you do decide to go this route and use the “*” to reset your margins and padding, that means that EVERYTHING, every element will have its margin and padding stripped bare. You will then have a relatively blank slate to work off of, but you will need to set margin and padding on all your elements. Be especially careful to set those attributes for unordered lists, list items, paragraphs, and headers.

For more on CSS Resets theory and practice, read from this article by the CSS master, Eric Meyer

Also be sure to check out this video by Nate Koechley for their YUI CSS grid. This video explains resets and so much more about css. It has changed the way I understand and code. Watch YUI CSS Foundations Video.