PDA

Click to See Complete Forum and Search --> : Floated div shuts down Flash

captsig
10-27-2010, 07:57 PM
Dear friends,
in isolating the essence of my problem, I created a simple page with embedded CSS for demo purposes.

The div on the left, "leftpanel" shuts down the Flash that plays in the div on the right, "flashspot"; you see the border of the
divs, right and left, nothing in the flash div. Remove the "leftpanel", the Flash plays normally in the div on the right!!
I'm baffled by what could be causing this.

Here is the (short) code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
#flashspot {
position:relative;
left: 270px;
top: 50px;
width:500px;
height: 400px;
border: thin solid #FF00FF;

}
#leftpanel
{
height: 1200px;
width: 200px;
float:left;
border: thin solid #CC6699;

}
</style>
</head>

<body>
<div id="leftpanel"></div>
<div id="flashspot">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="400">
<param name="movie" value="images/lucia_shuffle_2a.swf" />
<param name="quality" value="high" />
<embed src="images/lucia_shuffle_2a.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="400"></embed>
</object>
</div>
</body>
</html>

Can anyone suggest a possible solution?

Thanks,
captsig
Eye for Video
10-27-2010, 10:07 PM
The Flash was not being shut down, it was just being moved down below the left panel.
That happened because you gave a declared position to flashspot, but not it's parent. From an old post:
The thing missing from your positioning is that unless the parent element also has a declared position, the child will do 1 of 2 things.
If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.
By giving the left panel position:absolute.... problem solved, but...
It's almost never a good idea to use declared positions, they lead to a lot of problems unless you really understand what you are doing.
My advice, put all the content in a container <div>, float your left panel and use margin and/or padding to give a little space between that and the Flash. Then you can center or postion your container however you want.
Best wishes,
Eye for Video
www.cidigitalmedia
captsig
10-28-2010, 12:27 PM
Thanks 'Eye of Video' we'll give that a try.
captsig