Question

See: http://hostingcouponsclub.com/codero-coupons.

When I click the more<<(above the red poll part) why under IE7 the content doesn’t wrap around the image?

Under Firefox and Chrome, it’s ok.

How do I make the content wrap around the image when click the red more<< text in IE7?

Answer 1

It’s because when jQuery animates (your show/hide function uses “slow”) it causes the animated elements to “gain layout” this is turn causes the text not to wrap : Reference

e.g. your pr_content div lands up something like this with inline styles (in IE7, it’s different in IE8)

<div style="filter: ; zoom: 1; display: block" class="pr_content">

There’s various fixes but there’s also various bugs, I tried a few different fixes like removing the filter but there’s a also a bug with the removeAttr() function, I thought maybe removing the style attribute and using .css() to apply display:block or display: none; might work but no joy, though YMMV

Here’s your existing jQuery: (from idccoupon/scripts.js)

$('.pr_content').hide();
$('.moreteaser').click(function() { 
     $('.pr_teaser').hide();
     $('.pr_content').toggle("slow");
     $(".pr_content").attr("zoom","");
  $('.moreteaser, .lessteaser').toggle();
});

$('.lessteaser').click(function() { 
     $('.pr_content').toggle("slow");
     $('.pr_teaser').show();
     $('.moreteaser, .lessteaser').toggle();

});

Note: the attr("zoom", ""); which I know is a recommended fix for this problem, is not working to remove the zoom property as far as I can tell.. which is what I found trying to remove other properties too.

I got it to half work (i.e. no enhancement for IE) by removing the “slow” command for IE only, just means they get an instant show/hide rather than “smooth” one.. this or just letting IE users get unwrapped content like they have just now may be the easiest solution?

anyway here’s the code I used in case you want to try it:

$('.pr_content, .lessteaser').hide();

$('.moreteaser, .lessteaser').click (function() { 
    if (jQuery.browser.msie) {
         $('.pr_content, .prteaser, .moreteaser, .lessteaser').toggle();
    } else {
         $('.pr_content, .prteaser, .moreteaser, .lessteaser').toggle("slow");
    }   
});