I am just getting started with FAME (and I really like it!) but ran into a problem. My goal was to see if I could make an application that would resize itself dynamically to the size of the user’s browser. I was listening for the onResize event to be fired and would then do whatever was necessary.

For some reason, in Firefox 1.05, if I resize the browser in the vertical direction, it doesn’t seem to fire off the resize event and it seems to think that my Flash app is limited in height to about 200px. However, when I open it in IE, it displays as I would like.

I have tried to do the same experiment using both FAME and the Flash IDE, only to find the same results. Seems with FF, you have to remove the line:

<!DOCTYPE html PUBLIC “-W3CDTD XHTML 1.0 TransitionalEN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> from your html page and then it will render it “correctly”. -Chris

My 2 cents and unchecked: The line you ‘need’ to remove make me believe this is more of an css issue then it is a flash issue. Could you post the complete html somewhere to check? Making a document xhtml instead of html has some influence into how the browser should interpret things like ‘100%’ (in height e.g.). Correcting the css/xhtml might also fix your problem without the need to remove the line.

Heres what I use to properly render in firefox

<html>
<head>
  <title>RQB</title>
<style>
object{
height: 100%;
overflow: hidden;
}
</style>
</head>

<body>

      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
      codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
      width="100%" height="100%"
      id="benchmark">
      <param name="movie" value="benchmark.swf">
      <param name="quality" value="high">
      <param name="bgcolor" value="#FFFFFF">
      <embed src="benchmark.swf"quality=high bgcolor=#FFFFFF width=100% height=100% type="application/x-shockwave-flash" pluginspace="http://www.macromedia.com/go/getflashplayer">
      </embed>
      </object>
</body>

</html>

— Tiago Janz 2005/08/12 02:08



Jup, try giving the body a 100% height also. (P.S. Sorry for using this wiki page as ‘chat’ box)

This is an XHTML spec problem. If you set the height of one element, all the containers that surround that element need to have it set as well. In this case, the object/embed tag are inside the body and html tags, so you’ll need to set their width/height to 100% in order to have the object and embed elements display correctly.

So to achieve what you want, you’ll need the following css: 

<style type="text/css">
<!--
html {
	overflow: hidden;
	width: 100%;
	height: 100%;
}
body {
	overflow: hidden;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
object, embed {
	width: 100%;
	height: 100%;
}
-->
</style>