I have been trying to get this to work all day and feel like it should be much easier.
I have a flash object that I'd like to embed on a page. I did not make the flash object it was provided to me. The flash uses 100% height and width.
I've put the object code into a DIV on my site that holds the main content, the DIV has a set width value but not height (as the flash will expand depending on the height of the browser window). When viewed the flash is the correct width but the height is only about 150px tall.
I've discovered the problem is in using a doctype on my page:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
is what I am using. Apparently that causes issues in Mozilla browsers which is what I am currently testing in (Firefox 3.5). The solution I found is to use CSS to set the Height of the HTML and BODY tags to 100%, this sort of works.
The 100% BODY and HTML works only if the DIV containing my flash is the next level down (so the first DIV I use inside the BODY), this is not the case with my page. I have the Flash Container nested inside several other DIVs. If I set ALL of them to 100% height my flash container works perfectly but the rest of my site becomes screwed up.
Due to some effects and corners that I am using on the site the Flash needs to be inside several levels of DIVs. I can not move it inside a DIV closer to the HTML and BODY tags in order to make the 100% Height CSS trick work for it. Does anyone know of a way to make it so the flash will fill and expand the DIV it is in as necessary and still keep the Doctype for validation? I appreciate any input.
Your nested divs can only be as tall as your parent div's max height. If your parent div's height is set to 150px, then the nested div's height (if given a height of 100%) will be set to 150px.