CODEWITHSUNDEEP
cssfirebug
tbone
tbone

Reputation: 5865

In Firebug, how to tell what is overriding a style?

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.

Upvotes: 13

Views: 12380

Answers (5)

bassim
bassim

Reputation: 894

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.

Upvotes: 3

heisenberg
heisenberg

Reputation: 9759

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

Upvotes: 1

Alex Argo
Alex Argo

Reputation: 9030

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.

Upvotes: 0

Matt Fisher
Matt Fisher

Reputation: 241

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.

Upvotes: 10

Jurgen Hannaert
Jurgen Hannaert

Reputation: 973

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

Upvotes: 13

Related Questions