Deleting Browser Default Settings in CSS
March 2, 2010
Every browser has its own default settings for font size, margins and/or padding around certain elements, etc. Webdesigners should aim to have their sites display well on all kinds of browsers, but these different default settings can easily lead to problems. Sometimes, the differences are subtle and have no effect on the design, but they can also cause a page to totally break in one browser vs. another.
To demonstrate, you could look at THIS PAGE via Browsershots.org. (Just copy and paste ‘this page’ URL, then go to Browsershots and play around).
There is a quick and easy fix so. Start your stylesheet out with this:
* { margin: 0; padding: 0; border: 0; } |
The ‘*’ stands for any and all properties on your page, and this code sets them all to ZERO. Of course, now you’ll have to add your margins, padding, and any borders back in with your CSS in the right places, but usually, you’d have to do that anyway – and this way, it’s much easier to create a cross-browser compatible site.
