The CSS reset

HTML & CSS
1

Hi Guys,

just wondering if the css reset is considered good practice?

and if it is, does anybody have a link on the correct way to do it

thanks

which browsers isit compatible with?

2

I wrote that half awake and on pain meds, looking back, I sound quite…oxy moronish?

What I was trying to say, is just to not use a reset, but predefine values as you need them for whatever elements you will use on your page :).

3

Don’t do a lot of forms, do you?

Take a look at what it does to INPUT[text] and INPUT[submit] cross-browser between FF, Opera and IE.

4

I’ve found resets to be helpful for efficiency. I’m curious what issues you’ve had with:
*{margin:0;padding:0;} . I’ve been using that for years and have never had a problem.
I find it helpful to clear browser defaults. In my reset file, I include the styles that I use on every website like .imgLeft and .imgRight. It saves time if the surface is already primed before you start.

5

I can not aggree more with you Ryan. I started of with the Eric Meyers reset but at the end it gave me only headaches. I indeed studied the default margins/paddings and it helped me a lot.

6

Why would you bother with intermediate values?

We had this discussion a while back at CSSCreator. The only change I’d make to my arguments would be to be more emphatic about the silliness of the concept. If you don’t like the default values the browsers have built in, change them to what you want; don’t make some redundant ‘reset’ and then change them again. Resets are useless, redundant make-work.

cheers,

gary

7

RyanReese has it right in that the ‘universal reset’ of “* {margin:0; padding:0}” causes too many problems (mostly on forms)… and Meyers is just way to saggy around the middle; 90% of it’s bloat being stuff I’d not waste my time setting in the first place and actually has NOTHING to do with being a reset.

The one I use is thus:


/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

I’ve never needed more, and had nothing but headaches when I try to use less. It’s a nice middle-ground between the two extremes, and is part of how I can take layouts most people struggle with for weeks and belt them out in under an hour without even looking at the original code.

8

You shouldn’t use a reset such as Eric meyers, because his is too bulky, nor the unviersal reset *{margin:0;padding:0;} because that can have accessibility issues on form elements.

I recommend you learn what margins/paddings go on elements by default, and then manually set them to 0 (set back later if you need).

9

i’ve learn this issue long time ago. http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/ this is nice article :wink: