I have a project with several CSS files, each with many different settings. Every now and then I'll put an element on the page and it will appear unexpectedly, like an odd indentation, font color, hover behavior, etc. It's always a hunt to figure out exactly what CSS setting is causing the behavior. Is there any way to know exactly which CSS values are being applied to a given element?
+1
A:
Firebug is a big help to see what CSS is decorating an element.
John Nolan
2009-11-02 16:27:15
+2
A:
Get Firebug (for Firefox) and use the 'Inspect' capability - it will show you the effective CSS (and where it's coming from) for the highlighted element.
Marek Karbarz
2009-11-02 16:27:36
+2
A:
The best tool for this is Firebug, an extension for Firefox that shows you how and where an element is inheriting its current style.
Tim S. Van Haren
2009-11-02 16:27:44
+15
A:
Checkout 'FIREBUG' for firefox.... amazing add-on for web developers
https://addons.mozilla.org/en-US/firefox/addon/1843
You can click on elements and it will show you the classes which are applied.
Even better is that you can directly change the css values and see the result in real time in the browser - makes designing much easier and quicker.
Dal
2009-11-02 16:28:00
If you're using a framework that compresses and "strings together" the CSS files for speed, turn that off while you're developing.Another tip: invest a little time in learning about the first C in CSS, the cascade. Knowing a bit about specificity in CSS rules can help a lot as well.
Niels Bom
2009-11-03 00:12:37
+2
A:
In general you need to inspect the element.
In Firefox, install Firebug, right click on the element and choose "Inspect Element".
In Google Chrome, right click and choose "Inspect Element".
In IE8 press F12 or go to Tools -> "Developer Tools" then go Find -> "Select element by click" and click on the element.
Once you've inspected the element you'll see a list of the CSS rules that apply to it. You can also get the computed style.
Greg
2009-11-02 16:28:25
A:
As the above folks have mentioned Firebug is the greatest thing since sliced bread in checking out how css is effecting your site.
You can also use this little tool ALONG with firebug and then your CSS debugging gets much easier!
Daryl
2009-11-02 17:36:11
A:
Safari's new "Web Inspector" is as good as or better than Firebug for this. I stopped using Firebug now that Safari is smarter.
Randal Schwartz
2009-11-02 20:34:15