Chris G wrote:
I can follow the HTML facilities of Firebug OK, how it highlights the sections of a page as you click on different bits of HTML in the Firebug window. However I'm not at all sure how to then try and work out what particular bit of CSS is affecting something.
Can anyone (Brett?) elucidate a little for me.
In the firebug window, click on the "little blue box with an arrow" icon. Then, as you mouse around your web page, each inspectable element is shown with a blue box around it as you hover over it, and the CSS pane (bottom right) changes to show the CSS in use - in particular its inheritance, starting from the generic stuff at the bottom of the list to the more-specific stuff at the top. It also shows instances where styles have been overridden - such styles will have a trike-through. This is one of its most useful features, helping you figure out exactly which style has been used (and from where it has been defined).
It takes a little practice sometimes to be able to pick the container you're interested in (like a div wrapped tightly round an image), but if you can't find it naturally, you can select items (by clicking) in the HTML view, and similarly their CSS will be displayed in the CSS pane.
Simon