IE Problems

Get Started
1

I’m having problems with IE7, my site looks fine in FF,Safari,Chrome.
I’m very new to css, I’m more of a graphic designer therefore I’ve no idea what I’m doing wrong, any help will really be appreciated.

IE Shot: http://i28.tinypic.com/ojmdxw.png

Safari Shot: http://i28.tinypic.com/34j8unt.png

As you can see the SWF animation shows fine in IE, but the background image, and the black rectangle overlay at the top are non-existent.

Here’s my 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=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Example</title>
<link rel = "stylesheet" type="text/css" href="style.css" >
</head>


<body>
<div id="headerimg">
<div id="menutile">
<div id="flashContent">
			<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1100" height="480" id="swfhead" align="middle">
				<param name="movie" value="images/header.swf" />
				<param name="quality" value="high" />
				<param name="bgcolor" value="#ffffff" />
				<param name="play" value="true" />
				<param name="loop" value="true" />
				<param name="wmode" value="transparent" />
				<param name="scale" value="showall" />
				<param name="menu" value="true" />
				<param name="devicefont" value="false" />
				<param name="salign" value="" />
				<param name="allowScriptAccess" value="sameDomain" />
				<!--[if !IE]>-->
				<object type="application/x-shockwave-flash" data="images/header.swf" width="1100" height="480">
					<param name="movie" value="images/header.swf" />
					<param name="quality" value="high" />
					<param name="bgcolor" value="#ffffff" />
					<param name="play" value="true" />
					<param name="loop" value="true" />
					<param name="wmode" value="transparent" />
					<param name="scale" value="showall" />
					<param name="menu" value="true" />
					<param name="devicefont" value="false" />
					<param name="salign" value="" />
					<param name="allowScriptAccess" value="sameDomain" />
				<!--<![endif]-->
					<a href="http://www.adobe.com/go/getflash">
						<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
					</a>
				<!--[if !IE]>-->
				</object>
				<!--<![endif]-->
			</object>
            </div>
</div>
</div>
</body>
</html>

CSS:

@charset "UTF-8";
/* CSS Document */

html, body {
height: 100%;
width: 100%;
margin: 0px 0px 0px 0px;
background-color:#000;
}

#flashContent {
	width:100%;
	height:100%;
	z-index:1;
}

#swfhead {
	margin: 0px auto 0px auto;
}

#headerimg {
	width: 1200px;
	margin: 0px auto 0px auto;
	background: url(images/bg.jpg) center top;
	z-index:0;
}

#menutile {
	width: auto;
	margin: 0px auto 0px auto;
	background: url(images/menu/menutile.png) repeat-x center top;
	z-index:3;
}

Thanks in advance!

2

Emid, welcome to SitePoint. You didn’t waste anyone’s time. When (not if) someone else comes in with the same problem, they can read your thread and figure out what went wrong. So you done good. :slight_smile: Thanks!

3

Okay I feel really stupid but I’ve figured it out… I had Show Pictures unticked in IE, I had forgotten they were turned off :stuck_out_tongue: Sorry to anyone who wasted their time reading this