IE6 iframe rendering issue

Question

Hi, we have an issue with IE6 with a page inside an iframe.

When a submit button is pressed, the page reloads with some new text on it but the old text from the previous page is still visible. In some places this overlaps so that the text is unreadable.

Minimizing and maximizing the page cleans this up and view source only shows the new page with none of the old text so this could only be a rendering issue.

Is this a known IE6 bug and how do you get around it?

The following js works but it's clunky and does not work if you have js switched off.

window.onload = refreshPage;
window.onscroll = refreshPage;
function refreshPage() {
var body = document.getElementsByTagName("body")[0];
body.style.display = "none";
body.style.display = "block"

Any nicer hacks?

Thanks, Chris

EDIT
I've managed to recreate the issue on a development server where I've been able to modify the page directly on the web server to test different scenarios out. Note: I do not have control of the i-frame only what's in it so I have been restricted to changing this page only. One point of interest is that if I change the DOCTYPE from XHTML 1.0 Transitional to anything else, then I don't see the problem.

Answer 1

i would try adding a position:relative style to the iframe - this sometimes helps with these kind of issues. i'd need to see the page structure and css to help any further.

Josh

Answer 2

Another possibiliy is to add 'zoom: 1.0' to the style of the iframe. If this helps any and you want to know more, try looking around in google on the hasLayout property in Internet Explorer. This will be of some help in understanding why this is a solution to the rendering problem.