tags:

views:

216

answers:

5

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.

+5  A: 

They are sorted, so the most upper definition overrides the lower one(s).

Jurgen H
@tbone: if this still doesn't resolve your problem, scroll down, sometimes the overrider is not on top, e.g. in rules with `!important` in it
Infinity
+1  A: 

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.

Matt Fisher
This is what solved it for me.....I wasn't aware of the disable style feature, so that helped me figure it out.
tbone
A: 

If you select the misbehaving item in question, it should give you a list of all the styles applied to it. The bottom should have the most specific styles. If you start at the fieldset li style, you should be able to scroll down until you see one that has overridden it.

Alex Argo
"If you select the misbehaving item in question, it should give you a list of all the styles applied to it"...thats what I thought too, but this seems to only be visible in the computed styles tab...
tbone
+1  A: 

Just locate the instance of that attribute name that isn't crossed out, that is the one overriding.

kekekela
A: 

If a css rule is overridden although it is the top-most rule of that property, look further down for a rule that has the "!important" override set.

bassim