Follow this Blog!

Aug 16, 2012

f Comment

[SOLVED] Cannot Change CSS Display Property Value of a DIV Element via Firebug or Chrome Web Developer Tool!

Amazon I am using Firebug to change the style of my DOM for debugging purposes. My DOM consists of many div elements. When I try to add display: inline to a div element (by default a div is a block element) in Firebug it seems to work fine. But when I browse the Computed tab it shows that display is still set to block!

If you use Google Chrome the same thing happens with its web developer tool and the same solution applies!
Why? Does that mean I can NEVER set a div element's display to inline?

The answer is NO. You should be able to set a div element's display to inline. Read on to find out how!

Solution #1
Take a look at your div's position property. If the element has position: absolute it will automatically bind block to the display property! Therefore simply assign a value other than absolute such as relative or static to the position property and you can set the div's display to be inline with Firefox's Firebug or Google Chrome's web developer tool. If not read on.

Solution #2
Take a look at your div's float property. If its value is 'left' or 'right' then it will automatically bind block to the display property. Therefore set 'float' to 'none' and you should be able to set div's display property to 'inline' in the browser's web developer plugin again!

If you have any questions let me know and I will do my best to help you!
Please leave a comment here!
One Minute Information - by Michael Wen
Find Michael on Google or Facebook
ADVERTISING WITH US - Direct your advertising requests to Michael