All,
Here's what I'm trying to accomplish.
I have a Flash SWF that's embedded in a DIV. Depending on the user's interactions with that SWF, I'd like to dynamically adjust the height of the SWF.
The SWF itself is 1200 pixels tall. By default, the DIV is 690 pixels tall, so the lower part of the SWF is clipped (which is the behavior I want). Then, the DIV will shrink or grow, revealing or clipping more of the SWF.
Here's what my HTML looks like:
<body>
<div id="flash_wrapper">
<div id="flash_content">
This div will be replaced by an object via SWFObject
</div>
</div>
</body>
Here's my CSS:
body, html {
margin: 0;
padding: 0;
background:#ffffff;
}
#flash_wrapper {
width:1000px;
height:690px;
margin:0;
}
#flash_content {
display: block;
width: 100%;
height: 100%;
}
Last, I have a JavaScript function that looks like this:
function updateFlashDivHeight(h) {
document.getElementById("flash_wrapper").style.height = h;
}
The SWF calls that JavaScript function and passes it the height parameter like "900px" and voilá! - the DIV resizes perfectly. So far, this works great in all the browsers I've tested (IE8, Firefox, Chrome, Safari), EXCEPT IE6.
I'm a total novice when it comes to this (CSS especially), so I'm probably making a very simple mistake(s).
Many thanks in advance!