CSS * {margin: 0;padding: 0;} override

Hey all, i am in need of some help with figuring out how to override the "* {margin: 0;padding: 0;}" in my css.

The reason why is that i have this css:

 .postcomments { width: 547px; padding: 5px 5px 5px 5px; margin: 0 0 5px 0;} 
 .postcomments a { text-decoration: underline;}
 .postcomments ul { margin: 0; padding: 0; list-style-type: none;}
 .postcomments ul li { width: 547px; margin: 0 0 5px 0; padding: 0; list-style-type: none;}
 .postcomments .right { color: #474747; font-size: 11px; background: #fff url('http://www.nextbowluser.com/img/ucBG.gif') no-repeat top left; line-height: 17px; padding: 5px 0 0 0; width: 430px; position: relative; float: right; min-height: 50px;}
 .postcomments .right .bottom { padding: 0 5px 15px 5px; background: #fff url('http://www.nextbowluser.com/img/ucBG.gif') no-repeat bottom right; min-height: 50px;}
 .postcomments .arrow { left: -15px; top: 20px; position: absolute;}
 .avatar { border: none !important;}

 .postcomments .left {float: left; margin: 0 7px 0 0;}
 .postcomments .gravatar { background: #fff; width: 80px; height: 60px; margin: 0 0px 0 0; padding: 3px;}
 .postcomments .name { font-size开发者_JAVA技巧: 11px; margin: 2px 0 0 0; color: #000;}
 .avatar { border: none !important;}

and it displays just fine WITHOUT the * {margin: 0;padding: 0;}:

 1st comment
 2nd comment
 3rd comment

However, when i add that to the CSS, it makes the comments stack wrong:

 1st comment
    2nd comment
        3rd comment

I would just take out the * {margin: 0;padding: 0;} but some other things on the page needs that in order for that to be displayed correctly. So my question is, how can i override the {margin: 0;padding: 0;} for just that postcomments part of the page?

Thanks! :o)

David

UPDATE: Well. still can not get it correctly. After taking out the margin: 0px for the whole site- it makes the site look terrible. And if i have to add margin: 0px to every element to the page to make it look like it would with the * then thats not good. I still just need something to bypass it for the .postcomments part and thats it.

Did you try it with !important?

.postcomments {
   margin: 15px  !important;
   padding: 15px !important;
}

i am using 15px, but you can use whatever value works for you

Maybe use one reset.css (eric meyer e.g.) scripts available. then watch how you build the unordered lists. if there are nested ul you would normally get a margin-left for each ul

.postcomments should override *, since a class is more specific.

You'll need to provide more specificity then what the other answers contain

try putting the tag infront of the class, or a parent tag

div.postcomments {
span.postcomments {

or if that's not an option, you can always resort to

* .postcomments {