Eric Meyer has written a couple of posts recently where he outlines his take on a Reset CSS file for zeroing out default browser styles in order to create a level playing field on which to develop. It builds on ideas presented in the YUI Reset CSS file which he feels doesn't go far enough in some areas. There's some interesting comments following both posts and useful links to alternative takes on the idea. For me, however, both go too far. I'd prefer to use one which only affects the elements I most often find myself needing to reset. With this in mind here's my thoughts on a cut down version:
body {padding: 0;margin: 0;font: 13px Arial, Helvetica, Garuda, sans-serif;*font-size: small;*font: x-small;}h1, h2, h3, h4, h5, h6, ul, li, em, strong, pre, code {padding: 0;margin: 0;line-height: 1em;font-size: 100%;font-weight: normal;font-style: normal;}table {font-size: inherit;font: 100%;}ul {list-style: none;}img {border: 0;}p {margin: 1em 0;}
I've also included font resetting rules and a default font for Linux users which more closely matches Arial. I read an interesting article which discusses Linux font equivalents for common Windows and Mac fonts and I've had some interesting conversations with Stuart recently about supporting Linux based browsers. It does seem that most differences and the corresponding problems encountered on Firefox and Opera boil down to a mismatch in font sizes.
Download a compressed copy of my Reset CSS file.
To see an example of my Reset CSS file in use view this sample page.
Awesome. This is about all I ever really need (unless forms are involved)...
Yea that is about all anyone would every need unless forms are involved
You have some * in you Reset CSS that case some CSS "warnings".
Is it OK to remove them? Any alternative solutions to have this reset CSS work without any errors?
Thank you.
John - the * is a CSS hack which targets those rules to IE 7 and below. IE needs to be served different rules which I don't want the other browsers to see. Whilst they don't validate they won't cause problems either. While one should always strive to write code which validates one often has to strike compromises in favour of functionality. In this case I think it's an acceptable compromise.
However if you really want the CSS to validate you could move the *'d rules out into a separate file and target IE with conditional comments. In that situation the trade off you make is an extra HTTP request.
Thank you for your prompt answer. I will leave it as is. :)
"the * is a CSS hack which targets those rules to IE 7 and below"
I drag those IE specific rules out and put them in an IE stylesheet. You can then use conditional comments to include them for IE: http://virtuelvis.com/archives/2004/02/css-ie-only
"While one should always strive to write code which validates one often has to strike compromises in favour of functionality."
Absolute nonsense. The two are not mutually exclusive.
And you've specified your base font size in pixels, which from an accessibility standpoint, is bunk.
Thank You Eric ;) its perfect
Thx a lot, this works charm for ff and opera. I had a headache before to make display in opera and ff looked the same.
Your browser does not support iframes. is what I have had to resort to because there is no provision to RESET the CSS cascade in a STYLE="...CSS commands.."
This is a serious problem.
AJ maybe you should go research what "mutually exclusive" actually means. Your usage in that sentence made you look a little retarded, especially considering your holier-than-thou tone.
@Richard@Home a base font size specified in pixels isn't "bunk" you ridiculous cunt. The obscure ways of specifying base font size from the past (in percent or em) were workarounds for IE5.5.
You may have posted that comment 3 years ago but IE5.5 had long since died before that. I'm not normally one to dig up old topics but a retarded statement like yours needs a rebuttal and also people might actually look at your bold (but stupid) claim and mistake you for someone who knows what the fuck he is talking about.
This fixed all my problems with IE! Thank you!
THANKS! Worked perfectly!!
Thanks for the Usefull CSS Code; i think Anchor styles is forgotten in this.
Very helpful article, though it was written long time a go.
Thanks for sharing!!