I'm trying to work out another CSS conundrum and, as per Brett's advice, I am trying to use Firebug to do it.
However, at the moment, I really can't see how Firebug can be used to help me find what CSS is applied to a specific bit of HTML.
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.
On 01 Apr 16:00, Chris G wrote:
I'm trying to work out another CSS conundrum and, as per Brett's advice, I am trying to use Firebug to do it.
However, at the moment, I really can't see how Firebug can be used to help me find what CSS is applied to a specific bit of HTML.
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.
Use the clicky box button, click on the bit you're looking for the css for, and the css for that should appear (including which bits are overridden) on the right of the firebug window (Oh, and do all that in the HTML tab, not the CSS tab).
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
On Thu, Apr 01, 2010 at 04:15:27PM +0100, Simon Ransome wrote:
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.
Aaaaaahhhhhh!!!!!! :-) That was the bit I was missing, thank you.
-
Brett Parker -
Chris G -
Simon Ransome