CODEWITHSUNDEEP
jquerycssinternet-explorerword-wrap
Theopile
Theopile

Reputation: 918

Text Won't Wrap Around Image in IE8

I have a stationery image with animated text that wraps around it. In Chrome, Safari, and Firefox, the text wraps correctly, but in IE8, none of the text wraps. All the text appears as one big block.

<img src="someimage.png" width="200" height="200" align="left"/>
<div class="animate active">
    <h1>First Header</h1>
    <p>Lorem Ipsum is awesome</p>
    <h2>Second Header</h2>
    <p>More epic Latin</p>
</div>
<div class="animate">
<h1>First Header</h1>
    <p>Lorem Ipsum is awesome</p>
    <h2>Second Header</h2>
    <p>More epic Latin</p>
</div>

The jQuery toggles the display via fadeIn from display:none to display:block. Displaying the divs as inline fixes the problem but I can't seem to animate it the same with simply.

Upvotes: 2

Views: 625

Answers (1)

clairesuzy
clairesuzy

Reputation: 27624

I can tell you why, but not how to fix it - though am still looking to see if there's an optimal solution..

all these jQuery functions that fadeIn, fadeOut and fadeTo need an MS (opacity) filter to work which jQuery applies something like this (though it does it inline):

.active {
  zoom: 1;
  filter: ;
}

A Microsoft filter will not work without having hasLayout triggered to true, which is why it, jQuery, adds zoom: 1; at the same time. As soon as you set hasLayout=true on an element beside a float you trigger the IE "buggy" float model which exhibits as you describe, the text doesn't wrap!

it happens in every IE version so far (note: not sure about 9)

hasLayout is not supposed to exist in IE8, and I can say that zoom on it's own is not enough to trigger the dirty deed in IE8, but as soon as the, in fact any, filter is added (indeed the blank code above does it) the effect is the same. In non-tech speak I think the filter rule still needs layout so it's still being applied, even in IE8

I've tried a few things including using the -ms-filter notation and can't find anything that will work, if the effect can only be done with opacity I think you're not going to find anything

The jQuery toggles the display via fadeIn from display:none to display:block.

It doesn't only do that - if that's all it did then this would work, as soon as a "filter" is involved you will have this problem

code for testing:

img {
float: left;
width: 200px;
height: 200px;
}

.active {
zoom: 1;
/*filter: alpha(opacity=50); /* uncomment this to see it happen in IE8 too */

/*-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; - also tried but the effect was the same*/
}

HTML:

<img src="someimage.png" />
<div class="active">
    <h1>Long div Header</h1>
    <p>Lorem Ipsum is awesome</p>
    <h2>Second Header</h2>
    <p>More epic Latin</p>
    <h1>First Header</h1>
    <p>Lorem Ipsum is awesome</p>
    <h2>Second Header</h2>
    <p>More epic Latin</p>
</div>

Upvotes: 1

Related Questions