View Full Version : Zero out CSS Mess !!!!!

09-30-2009, 07:46 PM
I am creating a website and half way through tried to be clever and insert a CSS Zero Out Styles as below:

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0; }
ol { padding-left: 1.4em; list-style: decimal; }
ul { padding-left: 1.4em; list-style:square; }
q:before, q:after { content:''; }

I've now found its screwed things up i.e. my h1 and h2 tags don't show correctly, when I move the styles a couple of rows down the page my divs don't show properly, can some one explain what I have to do to use this zero out styles please !!!!

P.S. Could some one explain what order CSS styles should be used ,I'm a bit vague on this !!!

09-30-2009, 07:55 PM
Grab a copy of Eric Meyers CSS reset:

09-30-2009, 08:06 PM
Could you explain, if I insert the CSS to reset everything do I then style using ID's etc for say #mainContent h1 will override the h1 tag that has been zeroed in the zero out css style.
Does it matter where the CSS style is placed in the global style sheet !!!
Could you explain where to place the zero out css style

Cheers,Nick C

09-30-2009, 08:21 PM
Just load the reset styles first, then everything else later that has the same specificity will override it.
Also '#box h1' will always be more specific that just 'h1' and will always override it.