CODEWITHSUNDEEP
htmlcss
sawa
sawa

Reputation: 168071

Calculated style forced into something else

I have a <div> with the following css properties set via its class:

But when I see that object on Chrome tool "Computed Style" area, display: inline-block is recognized but is crossed out, and is calculated as "display: block". Why is this happening?

The class name for this <div> is called hbox_elem, and the computed style appears like this:

computed style

I tried Evan's suggestion, and now I get this, but it still does not work:

computed style2

Upvotes: 2

Views: 849

Answers (2)

thirtydot
thirtydot

Reputation: 228152

float: left forces display: block for most values of display.

http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below.

An extract of the table:

Specified value | Computed value  
--------------------------------
inline-block    | block

Upvotes: 11

Evan Mulawski
Evan Mulawski

Reputation: 55334

Another CSS rule may be overriding it. Try placing !important after inline-block to verify.

div.hbox_elem
{
    display:inline-block !important;
}

Upvotes: 1

Related Questions