CSS Reset: the first step to browser compatibility

As everybody knows, getting a website to look the same across different browsers is a tricky task to get right, if not impossible. That is because every browser has it’s own standard default CSS styling sheet built in. Discover how to reset them and create a blank canvas!

As everybody knows, getting a website to look the same across different browsers is a tricky task to get right, if not impossible. That is because every browser has it’s own standard default CSS styling sheet built in. So Mozilla Firefox will have a different default style to IE7 or even IE8. Even though these differences are subtle they are enough to give you some surprising results when you view your design in a new browser or platform.

The only way to fix this is to include at the top of your own CSS style sheet a ‘CSS Reset‘ script.
A while ago i stumbled across a basic CSS reset script and after some research i discovered Eric Meyer’s CSS Rest Reloaded script. Eric has created a really comprehensive script but as ever i felt the need to edit it for my own use. I personally felt it could be stripped down slightly and sometimes went too far. Specifically the body, blockquote, q resets and setting list-style to ‘none’. The following is what i had left:

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; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; line-height:100%;}
:focus {
/*outline: 0; if used define new style */
}
ol, ul {list-style:circle;}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {border-collapse: separate; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}

Leave a Reply