IE6, bottom: 0, and Javascript.

[jlizarraga]

Hi all,

I have a div with a bg image providing rounded top corners. There is an absolutely positioned (bottom:0) "footer" div within this div, providing the bottom rounded corners.

If I resize the text, all browsers including IE6 keep the footer at bottom:0 while the containing div grows and shrinks.

However, if I use JS to append elements to the containing div, IE6 doesn't recognize the height change (or something) and the footer is no longer at bottom:0; Changing the font-size magically causes it to appear at the bottom again.

What JS can I send to IE6 that will get it to recognize that the positioning needs to be refreshed as changing the font-size does?

Thanks!

EDIT: Well I just worked around it. Here was the old markup:


<div> <- Position relative, padding-bottom to match footer height.
<p>Content content content.</p>
<div class="footer"></div> <- Position absolute, bottom/left/right all 0.
</div>

If I added another <p> via script to the markup above, footer would no longer be at 0 in IE6 until I manually resized the browser's font-size.

New markup:


<div>
<div class="body">
<p>Content content content.</p>
</div>
<div class="footer"></div>
</div>

This way there's no absolute positioning for IE6 to choke on.

[jscheuer1]

This may be more an artifact of how you are adding the content as well as the markup it is being added to. However, IE 6 can be balky about such things at times, and there may be no good way around it. I'd need to see the page in order to know more about that.

However, from what you've said, you could try changing the font-size via javascript. Like say in your stylesheet you have:


body {
font-size: 100%;
}

You could try (the timeout may not be required, though the return to 100% is, but such a fast change back to the original 100% often will not even register as a change, hence the suggested timeout):


document.body.style.fontSize = '110%';
setTimeout(function(){document.body.style.fontSize = '100%';}, 100);

Run that each time after adding whatever you are adding. Since this presumably is only required for IE 6 (and perhaps less), you could select for it like so:


/*@cc_on @*/
/*@if(@_jscript_version >= 5)
if(navigator.appVersion.replace(/^.*MSIE (\d+\.\d+).*$/, '$1') < 7)
{
document.body.style.fontSize = '110%';
setTimeout(function(){document.body.style.fontSize = '100%';}, 100);
}
@end @*/

[jlizarraga]

Thanks a bunch John, that was exactly what I was looking for.