IE7 Div with Content Managed text isn't rendering correctly
Basically the problem appears to be that PIE is creating the extra divs for the rounded corners / shadows before the true size of the div is calculated, so I end up with a div whose size is purely from padding. The text within is correctly rendered, but continues outside the visible div.
Is there any way of either
1) deferring the PIE processing until the page has loaded all its contents
or
2) forcing the div or the page to re-render. As I found that resizing the browser forced the div to display correctly, I've tried using jquery to dynamically resize elements in the page, or to remove and re-add the corner + shadow classes, but this only seems to work sometimes.
Code:
if ($.browser.msie && $.browser.version <= 7) {
$(".divContent").css("display", "inline-block");
}
or
if ($.browser.msie && $.browser.version <= 7) {
$(".divContent").removeClass('roundedCornersStd').addClass('roundedCornersStd');
}
I've tried adding Delay in too...
if ($.browser.msie && $.browser.version <= 7) {
$(".divContent").removeClass('roundedCornersStd').delay(200).addClass('roundedCornersStd');
}
But things got really wacky, with buttons (with rounded corners and gradients) on the page not rendering properly.
I'm no JQuery expert, so maybe I misused the delay...?
Currently the only thing that always works is this:
Code:
if ($.browser.msie && $.browser.version <= 7) {
$('.divcontent').removeClass('roundedCornersStd');
}
... which is far from ideal. The rounded corners really make such a difference, it's a real shame to lose them.
Any suggestions welcomed!
Forums
