Use a CSS Reset document to help with cross-browser development
In this day and age, cross-browser development is highly important for your web design. Today I will show you an easy way to make sure all browsers (Firefox, IE, Chrome, etc.) start with the same defaults (padding, margins, etc.).
The Problem
Each browser has its own set of default attributes, including body padding, default font sizes and paragraph margins. This can often cause problems for web designers, making your site render differently across the different browsers. Fortunately, there is a simple way to reset all these default attributes.
The Solution
This issue is easy to fix by using a CSS Reset document. You can either prepend it to your existing CSS document, or make a new CSS document called reset.css – either way, it will have to be loaded before your main stylesheet.
There are a variety of CSS Resets available, but the following two are my favourites. Essentially both of them do the exact same thing, so it’s just a matter of preference, really.
The first option is Eric Meyer’s Reset, found at – http://meyerweb.com/eric/tools/css/reset/
Just copy and paste Eric Meyer’s code to the start of your CSS document, or save it as a new CSS file.
Your next choice comes from Yahoo, situated here – http://developer.yahoo.com/yui/3/cssreset/
You can load this Reset Sheet externally, straight from Yahoo – this can improve page speed. Alternatively, you can just copy the code from the document and make your own local Reset Sheet.
Conclusion
Use a reset sheet to “reset” everything back to the same common defaults across all browsers. This is a great technique and makes cross-browser development far easier.
