This is how the list looks without the '*' rule.

This is how it looks with it.

A 3rd party plugin/widget injects this CSS into my html page.

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

Is there any way i can override that CSS and undo all the damage that it does?

I have to have that widget on my page. I cannot just remove it.

EDIT: As per one of the ments, this CSS is good because it normalises the rendering, but it breaks my

This is how the list looks without the '*' rule.

This is how it looks with it.

• javascript
• jquery
• html
• css

• That CSS is good... it defaults the margins/padding to 0, which help normalize how browsers will display it – Jeff Shaver Commented Mar 25, 2013 at 16:52
• 2 yell at the widget makers for having such stupid css... then stuff the widget into an iframe and it can do whatever it wants to its css without affecting your page. – Marc B Commented Mar 25, 2013 at 16:53
• Where does this code get injected? If possible just move your stylesheet link beneath wherever this gets injected. – Michael Commented Mar 25, 2013 at 16:53
• Updated the question with more details. @JeffShaver – ashwnacharya Commented Mar 25, 2013 at 17:28
• @ashwnacharya ahh. gotcha. my bad. the body/html are good to reset like that, but I see the issues using * – Jeff Shaver Commented Mar 25, 2013 at 17:32

3 Answers 3

Elaborating on @j08691 's answer, specifically point nr 2, you can use the following to override the widget's css for the list:

html ul{
  margin: 1em 0;
  padding: 0 0 0 40px;
}

The values used are from Nicholas Gallagher's (@necolas) "normalize.css"

Either:

1. Add your own CSS after it to override the CSS you don't want.
2. Create more specific CSS rules as CSS rules with higher specificity will override those with lower specificity.
3. Use the !important keyword to override the styles you don't want.
4. Use inline CSS.

Yea, as @j08691 says, adding your css with the !important keyword might be the cleanest way:

* { margin: YOUR VALUE !important; padding: YOUR VALUE !important;}

html {margin: YOUR VALUE !important; padding: YOUR VALUE !important;}

body {margin: YOUR VALUE !important; padding: YOUR VALUE !important;}