5

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: 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.

StealthRT
  • 10,108
  • 40
  • 183
  • 342

4 Answers4

3

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

Germán Rodríguez
  • 4,284
  • 1
  • 19
  • 19
  • 4
    Don't use `!important` - instead learn about CSS specificity - http://www.w3.org/TR/CSS2/cascade.html#specificity – Richard JP Le Guen May 10 '10 at 02:31
  • @RichardJPLeGuen !important works for my case. Why is it not adviised ? What can be the issues ? I am building my app on bunch of css's and its hard to find where to hit and !important solved the problem in a second. – CodeMonkey Mar 23 '13 at 00:44
  • My comment got too long so I asked and answered a question: [Why is the use of `!important` discouraged?](http://stackoverflow.com/questions/15582385/why-is-the-use-of-important-discouraged/15582386) – Richard JP Le Guen Mar 23 '13 at 01:33
2

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

SQueek
  • 617
  • 4
  • 8
0

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

Matt Briggs
  • 41,224
  • 16
  • 95
  • 126
  • Thanks for the reply, Matt. but it does not seem to be so. The * {margin: 0;padding: 0;) is placed before the .postcomments css and it still does that. I even added it after the .postcomments and still ends up the same. – StealthRT May 02 '10 at 20:18
0

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 {
Ben Rowe
  • 28,406
  • 6
  • 55
  • 75