I’m sure you’ve all been there. You create a web page and it looks great in Firefox, then you preview it in Internet Explorer and…doh! You scratch your head and wonder, where did I go wrong?
Every browser has their set of built-in default styles for just about every tag. Most are the same but some aren’t, especially between the two main browsers (FF & IE).
Some of the most common differences are the margins and padding in the tags. Below is an example of the differences in spacing between Firefox 3 and Internet Explorer 7.
Example of Standard Spacing in Firefox
Example of Browser Spacing in Internet Explorer
As you can see above, there are differences in spacing in both browsers.
You can also view this example yourself, if you have multiple browsers installed, here: http://www.redicedesigns.com/blog/wp-content/links/reset_example.html
The way to make sure all your spacing’s are the same across all browsers is to reset all the tag properties. This will set all properties for all tags to minimum, or zero. From there you can style the page exactly how you intend to.
You can find the most commonly used reset CSS file from yahoo, here:
http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css
There are a few keys things to remember when using a reset CSS file.
- Always make sure when using a reset CSS file to list it FIRST, in the <head> section, in your list of styles. From then on you can add your own styles to supersede the reset styles.
- The reset file will reset everything.
This means your lists will be without spacing and properties, so initially the list items will appear as regular text lines. The <em> tag will not show text in italics and the <strong> tag will not show text in bold. - Always keep your reset CSS file separate from other styles.
Keep it separate from the styles you will use to style your pages. The last thing you want to do is to mix up your styles. This also helps because you can always come back to the reset file to modify it a lot easier.
