Problem with html code, works in Firfox but not Explorer

diluant posted this at 18:00 — 27th December 2008.

They have: 3 posts

Joined: Dec 2008

Hi all, i have a little problem with my html code. I made a Flash animation and generated the html from Flash. I found some html to center everything vertically and horizontally. I managed to make it work in Firefox but it doesn't show in Internet Explorer. Please help i need to put that portfolio online as fast as possible! I have attached my html code and u can check the link online with firefox at

http://pages.videotron.com/dilant

Attachment	Size
index.html	784 bytes

decibel.places posted this at 21:22 — 27th December 2008.

He has: 1,494 posts

Joined: Jun 2008

Hi diluant,

Welcome to TWF!

Ok, we have some problems...

Your link doesn't work, I think it is supposed to be http://pages.videotron.com/diluant/ which displays a blank page...

Let's look at the source code (which is not the same as the file you attached)

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<p>
<object type="application/x-shockwave-flash
data="menu.swf" 
width="900" height="480">
</object></p>
</td>
</tr>
</table>
</body>

I do not think you need the xml declaration: <?xml version="1.0" encoding="utf-8"?>

let's simplify your html tag <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> to <html>

AND CLOSE IT AT THE END OF THE DOCUMENT!! </html>

Let's add center to your p tag <p align="center">

Your code to embed the flash object is incomplete:

<object width="900" height="480">
<param name="movie" value="menu.swf">
<embed src="menu.swf" width="900" height="480"></embed>
</object>

You are no longer using a table, get rid of this code:

</td>
</tr>
</table>

et voila this code works!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<p align="center">
<object width="900" height="480">
<param name="movie" value="menu.swf">
<embed src="menu.swf" width="900" height="480"></embed>
</object>

</p>

</body>
</html>

in the attached file, I added <base href="http://pages.videotron.com/diluant/"> so it works locally...

diluant posted this at 21:52 — 27th December 2008.

They have: 3 posts

Joined: Dec 2008

Oh this is good! Thank you. One more question though, if i where to center the flash movie vertically what should i do?

decibel.places posted this at 17:12 — 28th December 2008.

He has: 1,494 posts

Joined: Jun 2008

This code will hide the flash while it is loading, center it on the screen, and reposition it when the browser window is resized:

(note that in the attached file I have added base href)

<html>
<head>
<script language="JavaScript">
		<!--
		var ie = document.all? true : false;
		function winSize() {
  		    var myWidth = 0, myHeight = 0;
		    if( typeof( window.innerWidth ) == 'number' ) {
			  //Non-IE
			  myWidth = window.innerWidth;
			  myHeight = window.innerHeight;
		    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
			  //IE 6+ in 'standards compliant mode'
			  myWidth = document.documentElement.clientWidth;
			  myHeight = document.documentElement.clientHeight;
		    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
			  //IE 4 compatible
			  myWidth = document.body.clientWidth;
			  myHeight = document.body.clientHeight;
		    }
			
			if (myWidth > 900 || myHeight > 480)
			{
				//center flash on larger screens
				if (myHeight > 480) disp.style.marginTop = myHeight/2 - 240 + "px";
				else disp.style.marginTop = "0px";
				if (myWidth > 900) disp.style.marginLeft = myWidth/2 - 450 + "px";
				else disp.style.marginLeft = "0px";
			}
			else
			{
				//on 800x600 screen, put flash flush top/left
				disp.style.marginTop = "0px";
				disp.style.marginLeft = "0px";	
			}
		  }
			
		function init(){
			//display flash onload
			if (ie) disp.style.visibility = "visible";
			winSize();
		}

		onload = init;
		onresize = winSize;
		//-->
		</script>

	</head>

	<body>

		<div>
			<object style="position: absolute" id="flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width=900 height=480 align="middle">
				<param name="movie" value="menu.swf"/>
				<param name="quality" value="best"/>
				<param name="play" value="true"/>
				<embed src="menu.swf" width=900 height=480></embed>
			</object>		<!-- test with image, not flash --><!-- <IMG id="flash" name="loader" SRC="ssBBJhome.png" WIDTH="200" HEIGHT="125" BORDER="0" ALT=""> -->
		</div>

	<script language="JavaScript">
	<!--
	var disp = document.getElementById("flash");
	if (ie)
	{		
		//hide while loading
		disp.style.visibility = "hidden";
	}
	else
	{
		//if not IE, move flash off screen until it loads
		disp.style.marginTop = "-2000px";
		disp.style.marginLeft = "-2000px";
	}
	
	//-->
	</script>

	</body>
</html>

I would also recommend loading the Flash using the flash detection kit

For this post, I reworked a snippet I created 3 years ago - I think it is a good resource to post on DZone

diluant posted this at 19:57 — 6th January 2009.

They have: 3 posts

Joined: Dec 2008

Thank you very much! The site is working great now. As for the flash detection kit i will take a look at it later, but you the man!

decibel.places posted this at 20:05 — 6th January 2009.

He has: 1,494 posts

Joined: Jun 2008

Hi Steve,

It takes a few minutes for your flash to load, and meanwhile there is a blank screen.

Either keep it on the screen to load by removing this code:

<script language="JavaScript">
<!--
var disp = document.getElementById("flash");
if (ie)
{ 
//hide while loading
disp.style.visibility = "hidden";
}
else
{
//if not IE, move flash off screen until it loads
disp.style.marginTop = "-2000px";
disp.style.marginLeft = "-2000px";
}

//-->
</script>

or put a placeholder there that will be covered by the flash

venz posted this at 20:20 — 20th January 2009.

They have: 2 posts

Joined: Jan 2009

hi there,
i have similar problem and if anybody can help that will be great.
i'm using a script found on the internet but it doesn't center the image correcr in IE when a base tag is included in the head. i think the problem comes from this function:

// Return the available content width and height space in browser window
function GetInsideWindowSize() {
	 if (window.innerWidth) {
		  return {x:window.innerWidth, y:window.innerHeight};
    }
    else
    {
		 var baseArray = document.getElementsByTagName("base");
		 if (baseArray.length == 0)
		 {
			 if (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) {
				  return {x:document.body.parentNode.clientWidth, y:document.body.parentNode.clientHeight};
			 } else if (document.body && document.body.clientWidth) {
				  return {x:document.body.clientWidth, y:document.body.clientHeight};
			 }
		 }
		 else
		 {
			 if (document.body && document.body.clientWidth) {
				  return {x:document.body.clientWidth, y:document.body.clientHeight};
			 } else if (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) {
				  return {x:document.body.parentNode.clientWidth, y:document.body.parentNode.clientHeight};
			 }
		 }
    }
    return {x:0, y:0};
}

IE center the image verticaly according the whole page height and not according the inner window height. and the problem is only when base tag is used in the head. in firefox is fine.
i'm not good with the scripts and lost a few days trying to fix this.
please help.

best regards, venz

decibel.places posted this at 23:01 — 20th January 2009.

He has: 1,494 posts

Joined: Jun 2008

Welcome to TWF, venz~!

It would help if you can post a link to the full page or attach an html file (and it needs to have the .html extension, not .htm)

You should probably start a new thread for your specific problem.

venz posted this at 23:44 — 20th January 2009.

They have: 2 posts

Joined: Jan 2009

thanks a lot
finaly I found some solution
I added styles to the body tag:
*position:absolute;
*height:100%;
and now the script gets the proper window.innerHeight and the image is centered verticaly at the browser window and not at the whole page height.
It's strange for me because this problem was caused even by empty base tag in the header () and the script centered the image according whole pahe height not the vissible part.

best, venz