Why does IE (and Firefox 4) not properly wrap this? (hasLayout??)

Question

I have the following (http://jsfiddle.net/gVZwr/4/):

<div>
    <label>From</label>
    <span>Some Content Goes Here</span>
</div>

span {
    display: inline-block;
    overflow:hidden;
}

in IE8/9, the label and span don't align (the label is lower than the span).

Why??? I can fix it by putting overflow:hidden on the label, but I want to know what's causing it. I tried the old “hasLayout” fixes, such as putting zoom:1 on the label, but nothing seems to fix it except, specifically, overflow.

FYI: I tried this in FF4 and the result is the same as in IE8. Chrome is different, though. — jwd, May 19 '11 at 00:42
hasLayout is long gone. I think the last version that used that was IE 7. Well, you then probably still have it in Quirks and Compatibility modes, but I hope you *do* test in the primary rendering mode ... — Joey, May 19 '11 at 00:43
Also note: adding `overflow:hidden` to the label does not fix it by itself. It also needs `display:inline-block` (at least in my tests) — jwd, May 19 '11 at 00:44
@Joey - I know `hasLayout` is long gone, but this seems to be a similar rendering issue since in IE<=7 setting `overflow:-anything-` would trigger `hasLayout=true`, and here I'm seeing that `overflow` is causing the browser to kick into a different rendering mode... or something. @jwd - Thanks, I actually hadn't tested this exact case in FF yet. — , May 19 '11 at 03:38

score 4 · Accepted Answer · answered May 19 '11 at 06:22

Your problem is that inline-block elements with overflow set to anything other than visible have a baseline that's at the bottom edge of the box (actually, of the bottom margin of the box) instead of having a baseline at the text baseline. See http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align the very last paragraph.

Then that baseline, which basically corresponds to the bottom edge of the span's border in your situation is aligned with the baseline of the label, which is the actual baseline of the text in the label. So the text of the label ends up below the text of the span visually.

WebKit doesn't follow the spec here and seems to be unwilling to change that because there's WebKit-specific non-Web content that depends on its current behavior. That's why you're not seeing the effect in WebKit.

Opera 11 does the same thing as IE and Firefox here, per spec.

Oh, and as far as fixing, you can either change the vertical-align of the label or take out the overflow on the span, assuming you actually need the span to be inline-block.

score 3 · Answer 2 · answered May 19 '11 at 00:44

3

Try vertical-align: http://jsfiddle.net/gVZwr/2/

answered May 19 '11 at 00:44

mingos

23,778
12
70
107

Okay, do you have any idea why `vertical-align:bottom` on the ___span___ causes the ___label___ to move? Also, I'm not so interested in a solution (as I said in the Q, I already have one), but the cause... Especially now that I see FF exhibits the same behavior. – May 19 '11 at 03:40
From the looks of it (I added borders to make it more clear), the span has an invisible `margin-bottom` or something that `vertical-align:-anything-` removes...? (as does doing a number of other things...) – May 19 '11 at 03:57
Not exactly. As Paud D. Waite remarked, the `inline-block` display causes this odd behaviour. – mingos May 19 '11 at 08:33

score 2 · Answer 3 · edited May 23 '17 at 12:26

2

How about making the <label> inline-block as well? I think inline-block affects the vertical alignment of elements.

(And, going off-topic, see @josmh’s answer about what <label> is for, i.e. labelling form fields.)

edited May 23 '17 at 12:26

Community

1
1

answered May 19 '11 at 00:46

Paul D. Waite

96,640
56
199
270

1

Indeed, it does seem to affect the `span` element's vertical align, hence my suggestion to set its vertical alignment to `bottom`. Removing the display property works just as well though. – mingos May 19 '11 at 00:50

score 0 · Answer 4 · edited May 19 '11 at 00:44

0

It's probably because the <label> is meant to be bound to something. Here are some examples.

edited May 19 '11 at 00:44

Joey

344,408
85
689
683

answered May 19 '11 at 00:42

Joseph Hansen

12,665
8
50
68

`` is indeed meant to be associated with a form field, but I don’t think that’s causing the layout issue. – Paul D. Waite May 19 '11 at 00:44
Yeah, this is a stripped-down example. It is bound to something in the actual use-case, but that's not what's causing the layout issue. – May 19 '11 at 03:35
@cwolves: out of interest, is it associated with a form field? Because (IIRC) nothing else makes sense as per the spec. – Paul D. Waite May 19 '11 at 09:46
1

@Paul - Yes, the actual code is more like : `
`, I just stripped it to the example above for simplicity. – May 19 '11 at 17:05

Why does IE (and Firefox 4) not properly wrap this? (hasLayout??)

4 Answers4