I have this css:
fieldset li {
padding-bottom: 0em;
}
However, it wasn’t behaving properly, and using firebug, I see that style has a line drawn through it, indicating it is being overridden. Is there a way in firebug to tell what is overriding a style?
In the style tab, this is all I see:
fieldset li {
clear:left;
float:left;
padding-bottom:1em;
width:100%;
}
Default.CSS (line 42)
fieldset li {
padding-bottom:0;
}
Default.CSS (line 27)
Inherited fromol
fieldset ol {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
Default.CSS (line 23)
Inherited fromtable#ctl00_ContentPlaceHolder1_ScorecardEdit1_frmEdit
element.style {
border-collapse:collapse;
}
When I go to the computed tab, I see it has padding-bottom of 16px. How can I find out where this is coming from?
All the answers so far seem to imply I should see all the applied styles in the style tab (and I swear this is how it worked last time I used firebug), but this time I am not seeing all styles!
(I am running Firebug 1.5.2)
Solution
I’m an idiot. It was caused by this (which was staring me right in the face):
fieldset li {
clear:left;
float:left;
padding-bottom:1em;
width:100%;
}
It was the em that threw me off. That’s what you get when you copy / paste CSS from the web without understanding it.
What ever styles are above the crossed out styles are usually overriding it. If that is not the case, start clicking the disable style icons and see where the issue is.