[solved] Text not wrapping float in IE7

[djeyewater]

I have a floated span followed by some text. In IE7 (and likely 6) the text does not wrap around the floated span. Here’s a screenshot showing IE7 left and Chrome right:

And the test page: http://www.iliveinabin.com/IE7-float-test.htm

CSS:

A {
DISPLAY: inline-block;
VERTICAL-ALIGN: middle;
WIDTH: 19em;
}

A SPAN {
DISPLAY: block;
FONT-SIZE: 2.2em;
FLOAT: left;
PADDING-TOP: 0.2em;
}

HTML:

<A href="#"><SPAN>LO</SPAN>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus commodo pellentesque lacus, id convallis mauris volutpat sit amet</A>

Does anyone know why this happening in IE7 or how to fix it?

Thanks

[RyanReese]

I have to ask - why in the world are you coding for IE7? You do know the percentage of people using it, right?

[djeyewater]

The percentage varies by site. Some of my sites have quite high IE6 usage (lots of visitors from China), others very little.

[RyanReese]

I feel sorry for you.

I don’t have IE7 but I’m going to guess that the vertical-align is screwing things up for IE7. Try taking that out.

[djeyewater]

Thanks! That does fix it.

This particular problem wasn’t a big issue, since the text is still perfectly readable in IE7. But I do like try and get things looking reasonable if it’s not too much extra work.

[RyanReese]

@djeyewater

This particular problem wasn’t a big issue, since the text is still perfectly readable in IE7. But I do like try and get things looking reasonable if it’s not too much extra work.

Glad it works . I do agree, not a huge issue but still…

I had to rub my eyes and slap myself since I was seeing an IE7 question. Flashback to a few years ago…

[PaulOB]

If you do subsequently need to set to vertical-alignment of that block then just use line-height instead to cure the problem.

a {
    display: inline-block;
    vertical-align: middle;
    width: 19em;
    line-height:1.2;
}