Calculated style forced into something else

Question

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

display: inline-block
float: left
clear: none

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

I just remembered, I've answered this before: http://stackoverflow.com/questions/5854463/jquery-in-chrome-returns-block-instead-of-inline/5854523#5854523 — thirtydot, Feb 19 '12 at 17:10

score 11 · Accepted Answer · answered Feb 19 '12 at 17:07

11

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

answered Feb 19 '12 at 17:07

thirtydot

224,678
48
389
349

Thanks for pinpointed information. That is just what I wanted. – sawa Feb 19 '12 at 17:30

score 1 · Answer 2 · answered Feb 19 '12 at 16:49

1

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

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

answered Feb 19 '12 at 16:49

Evan Mulawski

54,662
15
117
144

Is there a certain property that is making this overriden? – sawa Feb 19 '12 at 16:57
Do you have/can you post a live example somewhere? (JSFiddle, etc.) – Evan Mulawski Feb 19 '12 at 16:57
Sorry, I had it screwed up somewhere, and now I found what was wrong. Thanks for helping. – sawa Feb 19 '12 at 17:07
@thirtydot: Even I agree with you. – Evan Mulawski Feb 19 '12 at 17:12
@thirtydot I thought my problem was solved, so I just accepted it so that this question will not remain in the unanswered section. Now that thirtydot gave another answer, I will accept that. – sawa Feb 19 '12 at 17:27

Calculated style forced into something else

2 Answers2