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.
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.