CODEWITHSUNDEEP
css
jimsmith
jimsmith

Reputation: 11

Finding applied CSS

I have a page where the UL is set to padding-left: 40px and I can't find where it is being set. In firebug it shows in 'computed' but isn't in the inherited styles list. I've tried removing the jquery in case it was set in js. I've removing the css - it's still there. I've set a breakpoint on attribute change - nothing.

Setting padding-left:0px doesn't fix IE7

Is there a plugin or some better way of inspecting applied css rules?

Upvotes: 1

Views: 68

Answers (2)

Spycho
Spycho

Reputation: 7788

It's probably a browser default. If it's not in firebug's style tab, it's being applied by the browser itself.

To get Firebug to show user-agent defined CSS, click on the style tab drop-down and click "Show User Agent CSS" (thanks Gerben).

You can override styles that are set by the user-agent, simply by defining the style attribute for that element:

ul{
    padding-left:20px;
}

Note that IE7 uses margin instead of padding as the default style for lists.

You can 'reset' all user-agent defined rules using something like Yahoo's reset stylesheet.

You can also 'normalise' the style applied to a page. This means overriding user-agent defined styles so that all browsers use a standard style. I personally prefer this method over 'resetting' the CSS and having to explicitly define CSS rules for everything. It's easier and takes up less space. Try this library.

Upvotes: 2

thirtydot
thirtydot

Reputation: 228282

That padding-left on ul is coming from the user agent stylesheet.

You can remove it with:

ul {
    padding-left: 0;
    margin-left: 0
}

Firebug is already the best Firefox plugin for this sort of task. You just need to enable this option:

Upvotes: 0

Related Questions