HELP! Stupid DIV causing SWF to shrink in Firefox 1

[rexolio2008]

I'm posting this here because I believe it's a CSS issue and not a Flash issue.

I'm trying to implement a flash photo gallery into a site I'm helping with. The flash is contained in a div with a height of 479 pixels. The SWF is set to appear in 100% of it's container (#text-exp2), so I believe it's a non-issue. Besides, it looks GREAT in IE7 and Safari. In Firefox 3, it's shrunk (in height).

I just don't know what it could be. I wasn't sure if I should post the entire CSS here, but here's a snippet of it, and if that doesn't help, I've posted a link to it below that!

#cbody {
	clear: right;
	margin-left: auto;
	margin-right: auto;
	width: 949px;
	height: 548px;
	background-image: URL('../images/bg-content.jpg');
	background-color: #000; 
}

#cbody #header {
	float: right;
	margin-right: 4px;
	width: 752px;
	height: 67px;
}

#cbody #textbody {
	clear: right;
	float: left;
	/* margin-top: 67px; */
	width: 949px;
	height: 481px;
}

#textbody #logo {
	float: left;
	width: 197px;
	height: 152px;
}

#text-exp h1 {
	line-height: 1.15em;
}

#text-exp #text-exp1 {
	float: left;
	width: 150px;
	height: 479px;
}

#text-exp #text-exp2 {
	float: right;
	margin-left: 10px;
	width: 585px;
	height: 479px;
	text-align: left;
}

And now the HTML:

<div id="cbody">
			<div id="header"><img src="../images/header.png" alt="" /></div>
			<div id="textbody" class="textbody-experiences">
				<div id="logo"><a href="../index.html"><img src="../images/blnk.gif" width="197" height="152" alt="" /></a></div>
				<div id="text-exp">
					<div id="text-exp1"><h1>Header Text Here</hl></div>
					<div id="text-exp2">
						<div id="flashcontent">
							<p><strong>Oops!</strong></p>
							<p>It looks like you don't have flash player. <a href="long url here" >Click here</a>.</p>
						</div>
						<script type="text/javascript">
							<!-- SWF CODE GOES HERE -->
						</script>

					</div>
				</div>
			</div>
		</div>

If that doesn't help, you can see how the gallery works when it's NOT in a div (meaning it takes up 100% of the space) here:

http://www.djteramcwayne.com/gallery/flashgallery.html

Then you can view it as I have it (which again works fine in IE and Safari):

http://www.djteramcwayne.com/gallery/experiences2.html

 

[rexolio2008]

The last link was actually the incorrect one - that was just a test I was doing. here's the page that looks correct in other browser but not Firefox (version 3):

http://www.djteramcwayne.com/gallery/experiences.html

 

[Vragabond]

By default, divs do not extend to the 100% of their parent but to the height of their content. Now if we take a look at your code, you have #text-exp2, which is 479px in height. Then you have #flashcontent, which has no height specified, thus auto (the height of its content) is implied. Inside the #flashcontent, you have the flash element, which is said to be 100% high. 100% of its container, which has no height. Thus there is a confusion, because #flashcontent will be only as high as its content and its content will be 100% of the container. FF sees this confusion and applies default height to the flash element. Other browsers might have gone sniffing around and matched the height of both #flashcontent and flash element to the #text-exp2. However, this is browser prediction when encountering ambiguous code -- it is not a correct interpretation of your code.

If you give height to your #flashcontent, everything will work out perfectly. Either percentual or pixel height will work.

Do something about world cancer today: Comprehensive cancer control information at PACT

 

[rexolio2008]

Vragabond - you are the man (or woman)!!!! Thank you sooo much. That did the trick!