CSS/Flash interaction question

I'm developing a site for a client who wants users to be able to post 
poems and choose among a different set of fonts for display.  The 
most portable solution we could think of involves using Flash to 
create a display area for the poem, and pass a font specifier as a 
parameter.  The SWF only has to load once, and different poems can 
use different fonts without a penalty for having to reload the 
movie.  The other thing I want to do is to resize the stage area for 
the SWF so the height is correct for the poem.  I'm using a technique 
described at 
<http://www.mustardlab.com/developer/flash/objectresize/>.  The Flash 
actionscript determines the stage height needed, and calls a URL to 
the page that calls a short javascript function to resize the 
division the SWF is in.  The SWF itself is set to a height of 100%, 
and relies on the division to contain its height.

This works perfectly in Firefox 1.51 (I'm on XP), but has some issues 
with IE 6.  This is some sort of a DOM/CSS issue, but I can't get a 
handle on it.  I made a stripped-down version of the page here:
http://www.glatz.com/mtest/mtest.html

I've removed as much as I can to illustrate the issue.  You'll notice 
a couple of rows of images below the poem (icon 1-4, icon 1-3).  If I 
display the page in IE from a cold start, they usually get 
displayed.  If I then refresh it, they don't display.  If I flush the 
cache, they will show back up until I redisplay them.

I'll add my actionscript at the end of this email (and will be happy 
to send you the Flash and any other files you want).  If I comment 
out the call to "resize()" at the very end, which sends a new stage 
height parameter back to the page and uses javascript to resize the 
enclosing division of the stage, the problem goes away.

thanks for any suggestions!

the actionscript:
-----------------
// width of stage
swid = 740;

allowResize = "true";

// call this to resize the stage
function resize() {
	if (allowResize == "true") {
		h = Math.ceil(pBody._y+pBody._height)+10;
		//h=500;
		getURL("javascript:setFlashHeight('wrapper',"+h+");");
	}
}

// Setting a stage to align to "TL" (top left) spares us the need to 
re-shift the contents of the stage
// everytime we resize the object/embed tag in javascript. By 
default, Flash is aligned to the center of a flash movie.
Stage.scaleMode = "noScale";
Stage.align = "TL";
// Initialize objects on the stage depending on whether the browser 
supports resizing flash
if (allowResize == "true") {
	pBody.autoSize = "Left";
} else {
	pBody._height = 274;
	pBody._width = swid;
	s = _root.attachMovie("FScrollBarSymbol", Scroller, 1, {_x:710, _y:28});
	s.setSize(270);
	s.setScrollTarget(pBody);
}

// load external vars
// calculate positions and heights of the three text boxes
bpTitle.autoSize="center";
pTitle.background=false;
pTitle.text=p_title;

pAuthor._y = (pTitle._y + pTitle._height) + 2;
pAuthor.autoSize="center";
pAuthor.background=false;
pAuthor.text=p_author;

pBody.html = true;
pBody.background=false;
pBody._y = (pAuthor._y + pAuthor._height) + 8;
pBody.text=p_body;

resize();

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

CSS/Flash interaction question

Sent by Phil Glatz on 28 March 2006 02:02