Debugging in Firebug

Wonder if anyone can give some advice.

Bascially this is something I come across from time to time - I'm learning to debug using firebug and trying to track down where a style attribute is being set in a complex bunch of wordpress/fancy box files.

Bascially I'm trying to get fancybox to autosize to width of element, I know the fancybox option to enable this, but the whole box seems to be overriding with a fixed width, which i can't find anywhere in the stylesheets.

element.style {
border-width:10px;
height:84px;
width:987px;

Now, this do开发者_运维百科esn't have a style sheet associated on the right hand side in firebug, so I'm assuming this means its computed on the fly somewhere in the js/php ?

What I'm after is a pointer on how to track down where it's being set, and how I can maybe use firebug to identify that if it's being set outside the stylesheets? it's so I can be a better debugger too :) thanks for looking.

in mozilla browser using firebug click on arrow icon at (left top corner) and select any control on page. it will display their style(css) at right side. here you can made any changes and it will display at browser.

think it will helpful for you.

When element.style is specified as the origin of the style information, it means that the style is inline (i.e. specified as an attribute to the tag).

E.g.

<div style='border-width:10px;height:84px;width:987px;>This is a box</div>

If you can't see that in the source code, it's possible it's been added in by some javascript

Using the web-developer addon for Firefox, you can not only view the source, you can view the generated source which will give you the source after any javascript has acted on it.

1. First locate the element
2. Once you do this, trigger the event, you will see the change