Did you ever notice how browsers seems to have slightly different ideas on how certain HTML elements are displayed? If you're like me then you once lost the same amount of time it takes for breakfast cereal to go soggy before you figured out what was going on.
The image below perfectly demonstrates the small inconsistencies between elements in different browsers, yet these are often more than enough to throw your pixel perfect design into chaos.
You can save your sanity by resetting chosen HTML elements so that they act the same across different browsers. Because even despite their differences, one thing all browsers agree on is that zero is still zero.
At the beginning of your CSS file just include the elements you want to have reset.
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,
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;
}This is a typical reset that I would use but you can of course specify any elements you like. With the reset in place the browsers finally agree on something. Here's proof:
Right away you can see your CSS life just got a whole lot easier.
What's the catch?
As with some great ideas, there's a trade-off. You've probably already worked out that anything you include in the reset will have to be manually styled further down your style sheet. So taking UL as an example, now that it's reset it means you're going to have to declare padding, margins etc for UL's further into your style sheet. But that's the whole point of this exercise - to give you that control and avoid cross-browser discrepancies.
Greg Molyneux
Excellent tip, I'll be resetting in my style sheets from now on. Someday in the mythical future we can only hope all browsers will be created equally (someday...).
Monday 15th June 2009 | 06:13 AM Reply Comment URL Profile Back to top