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?
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");
}
});
It's probably because <div id="provider_top"> is floated and <div class="node-body"> (which is a sibling to the former) is not. Try putting #provider-top inside #node-body to see if that fixes it.
