when beggining a CSS page us this code?

[keano]

I have seen this used sometimes and other times not. Should this be used all the time to begin a CSS page?

body, ol, li, h2, h3, p { margin : 0; padding : 0; }

Also should you preview in Firefox and get it looking right and then later on make fixes for IE?

[redhillccwebmas]

You have it exactly right. That CSS is used to reset all the different built-in browser stylesheets for the specified elements so that you have a 'clean state' to work from. A more efficient and effective rule, would be :-

* {
padding:0;
margin:0;
}

which by using the the specified selector, resets EVERY elements margin and padding to 0;

Yes, a good way to preview your page would be to view it in a browser that is deemed one of the most standards compliant (at the moment, thats FF), and THEN look in IE to see whats going on and whether you need to apply any IE-specifc workarounds

[markbrown4]

I typically use the global reset above, though it should always be mentioned that there are some adverse effects on form elements when using the above method in some browsers that can't be rectified.

Many choose a method similar to this instead for this reason,
http://meyerweb.com/eric/thoughts/20...eset-reloaded/

[Centauri]

Also should you preview in Firefox and get it looking right and then later on make fixes for IE?

I always preview in both (especially IE6) during the site development - that way you can catch problems as they occur. Waiting until the page is finished before checking in IE will be a lot more work...

[markbrown4]

I always preview in both (especially IE6) during the site development - that way you can catch problems as they occur. Waiting until the page is finished before checking in IE will be a lot more work...

Hmm, I have always started and finished my CSS work using firefox, then when completed tested in IE, and other browsers and applied fixes.

When I was starting out it took a while to find the fixes but you begin to learn the differences and just code IE's quirks out as you go. Things like always applying a width is a good way to fix many IE bugs, and the FAQ on hasLayout is fantastic for understanding how to get rid of nearly all of them.

[keano]

Yeah I thought

* {
padding:0;
margin:0;
}

would do it but I saw a book called Transcending CSS and he used foolowing:

/* Normalizes margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td 
{ margin : 0; padding : 0; }

/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size : 100%; }

/* Removes list-style from lists */
ol,ul { list-style : none; }

/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var
{ font-style : normal; font-weight : normal; }

/* Removes list-style from lists */
table { border-collapse : collapse; border-spacing : 0; }

/* Removes border from fieldset and img */
fieldset,img { border : 0; }

/* Left-aligns text in caption and th */
caption,th { text-align : left; }

/* Removes quotation marks from q */
q:before, q:after { content :''; }


/* layout.css */

html 	{ text-align : center;  }

[Dan Schulz]

It kinda does the same thing, but the problem with that approach is that it touches the form controls - some browsers will not let you re-apply margins or padding to form controls once they've been zero'd out, so I don't touch them.

Here's what I do instead:

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, textarea, tt, var {
	margin: 0;
	padding: 0;
}

And just so you know, you should test in IE 6, IE 7, Firefox, Opera and Safari at the same time as you go along (if you add a section to your HTML and/or CSS, stop, validate your code, then check in those four browsers (ok, five if you go by instances of those browsers) for any rendering problems. Lather, rinse, repeat.

And yes, I zero'd out the margins and padding on inline elements as well for a reason - I don't want to leave anything to chance (except for form controls since i really don't have a choice there).