Can I force redraw of elements in IE4?

[Purple Martin]

I'm dynamically resizing a div to make it smaller, and sometimes the content means that it's displayed size is wider than intended. That's fine as long as I can measure how big the displayed size is.

I can read the offsetWidth property to get the new size in IE 5 and above, but IE 4 is not reading the new size. Strangely, if I add an alert just before I try to read the new size, IE 4 gets it right. But as soon as I take the alert out - it fails.

It's as if the browser hasn't finished redrawing the div by the time I want to read the offsetWidth. How can I force the browser to finish redawing the element before I read it's properties? (p.s. a full page reload is out of the question).

[joshie76]

I have seen a similar problem in IE5. We fixed it with a bit of a hack...

There are a number of ways you can force an element to re-render (without a reload) - the most effective one I found was to quickly switch the display style of the element in question. That is:

Set the display property to none (element.style.display = 'none') and then return it to block (element.style.display = 'block').

A complete fudge I know but it did force the element to re-render, with the result we wanted. As I say - this worked for us in IE5, who knows if it will with IE4.

If anybody has a real solution to this problem please share it with us!

Josh

[Purple Martin]

Thanks for the suggestion Joshie, I tried it but unfortunately it didn't work.

I have found another work-around that fixes it most of the time, but it's very inelegant. I've split my function into two functions. I resize my div in the first, and then use a setTimeout to call the second function which measures the new size. The browser finishes drawing the element before the second function is called, and so the new size is properly read. Well I did warn you it was inelegant!