How can you find out where the style for a ASP .Net web page element came from?

Question

I have a quandary. My web application (C#, .Net 3.0, etc) has Themes, CSS sheets and, of course, inline style definitions. Now that's alot of chefs adding stuff to the soup. All of this results, not surprisingly, in my pages having bizarre styling on occasion.

I am sure that all these styles are applied in a hierarchical method (although I am not sure of that order). The issue is that each style is applied as a "transparent" layer which just masks what it is applying. This is, I feel, a good idea as you can specifiy styles for the whole and then one-off them as needed. Unfortunately I can't tell from which layer the style actually came from.

I could solve this issue by explicitly expressing the style at all layers but that gets bulky and hard to manage and the page(s) works 80% of the time. I just need to figure out where that squirrelly 20% came from.

Answer 1

in Firefox use the DOM inspector, firebug, or inspect this.
in IE, use the IE dev toolbar (or, maybe better, Firebug Lite)
In Google Chrome, use the built-in "inspect element" functionality

Answer 2

IMHO, Firebug is going to be your best bet. It will tell you which file the style came from and you can click on the filename to be transported instantly to the relevant line in the file.

Note: You can hit ctrl+shift+C on any page to select and inspect an element with the mouse.

Answer 3

Using the IE Developer Toolbar you can select an element (either by "Select element by click" or clicking on its node in the DOM tree view) and in the Current Style pane, right click on a row and select "Trace Style".

The other tools have a similar feature.

Answer 4

Here's a quick sreencast of how to use Firebug to find out from where an element is getting it's style.

http://screencast.com/t/oFpuDUoJ0

Answer 5

The key to solving a complex CSS issue is to work out what is causing the weird appearance. The easiest way to find is to selectively comment out stylesheets until you find the one where commenting it out fixes the problem. Then enable the stylesheet and selectively comment out rules until you find the one causing the problem. If you need to know what takes precedence over what, the details of the cascade in CSS is detailed here and unlike the implementation of individual rules, this is fairly consistent across browsers.

However, it is much better if you avoid inline styles entirely and have a set of well-crafted stylesheets, each of which has a logical function and all of whose rules you understand. for the same reason you don't put your server-side code in a random order in random files - us