CSS Reset

[JuliaTolmacha]

Where do people stand on CSS resets?

I used to use
CODE
* {margin: 0; padding: 0;}
to cancel all the browsers' default margin and padding.

But I've been reading recently that a lot of people don't use this anymore as it creates more work later on by cancelling margin and padding on certain elements which need margin and padding, such as form elements.

Is it best to reset default styles only for certain elements, or just let the browsers do their thing?

 

[orvackoo]

When you want to reset it, just write :

body{margin:0px;padding:0px;}

- and if you want to set DIV in middle, you MUSt set margin, if you have reseted something or no ..

 

[RenaissanceMan]

A good place to start is Eric Meyer's reset stylesheet. It's not designed as the be-all and end-all, but it does reset literally everything so you can then go through it and remove the resets for elements (such as form elements) which you don't want reset.

Alternatively, since all the major browsers tend to disagree on how to style form elements by default, you might to better to keep the reset stylesheet intact and reset the rules in your own stylesheet, for better cross-browser consistency.

 

[bcee]

I use Eric Meyer's on most of my sites. It helps a bit when developing for older browsers such as IE6.

 

[tothepoint]

When building a website, a key in it's professionalism is to make it look the same in all browsers. There are a lot of things that are better to be defi0ned by your self rather then defined differently by different browsers.

My advice would be to use a reset style sheet. Yahoo has one that is good and also the Eric Meyer's one looks good also.

I use the Yahoo one a bit modified:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,span{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;} 
ul li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:top; opacity: 0.8;}
sub{vertical-align:bottom; }
legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{font-size:100%;}

After this code, I set up my own code for all of this elements... That way, no matter what browser you use, your element styles will be the same and the website design consistent and professional.

Best regards,

 

[jonnymark]

CSS Reset avoids browser inconsistencies

For example, say you use an anchor tag <a> in your HTML document. Usually, browsers like Internet Explorer and Firefox will render it as blue and underlined.

But five years from now, someone decides to release a new browser (let’s call it UltraBrowser) and they decide that they don’t like blue, underlined links – so instead they set the default style of <a> tags to red and boldfaced. If you always set a baseline value for your <a> elements, then you’re guaranteed that it will always be the same, regardless of what UltraBrowser thinks <a> elements should look like.