[56K WARN] Page displays properly in Opera but not in IE

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

[56K WARN] Page displays properly in Opera but not in IE

Post by legend986 »

I was surprised at the sight of this: Usually IE displays pages correctly because I heard it ignores a few errors and that Opera does not display properly because it strictly standards complaint. But see the following image:

Image

This is my HTML:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta name="author" content="Legend">
	<link rel="stylesheet" href="style.css" type="text/css">
	<title>Untitled 1</title>
	<script src="prototype.js" language="JavaScript" type="text/javascript">    </script>
	<script src="scriptaculous.js" type="text/javascript"></script>
</head>

<body>

<div id="wrapper">
	<div id="header"></div>
	<div id="wrapcontent">
		<div id="menu">
			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com
/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="736" height="96" id="movie" align="middle">
<param name="movie" value="roboveda.swf"> <embed src="roboveda.swf" wmode="transparent" width="736"
height="96" name="movie" align="middle" type="application/x-shockwave-flash" plug inspage="http://www.macromedia.com/go/getflashplayer"></object>
		</div>
		<div id="content">
			<div id="content-left">
				<div onclick="new Effect.Appear('gone')">
				    Click here if you want to show it.
				  </div>
				<div onclick="new Effect.SwitchOff('gone')">
				    Click here if you want to hide it.
				  </div>
			</div>
			<div id="content-main">
				<div id="gone">This will be gone now</div>
			</div>
		</div>
		<div id="footer"></div>
		<div id="bottom"></div>
	</div>
</div>

</body>
</html>
And my CSS:

Code: Select all

body {
		font-family:arial,helvetica,sans-serif;
		font-size:12px;
		background-color: #E9DAB3;
		
}

#wrapper {
		width:800px;
		margin:0px auto;
		border:1px solid #bbb;
		padding:0px;
		
		background-position: top center;
}

#header {
		/*border:1px solid #bbb;*/
		height:210px;
		padding:10px;
		margin-top: 0px;
		background-image: url('top.gif');
		background-repeat: no-repeat;
		background-position: top center;
	}

#menu {
	/*border: 1px solid #bbb;*/
	
	height:96px;
	/*padding:10px;*/
	/*margin-top: 10px;*/
	text-align: center;
}

#wrapcontent{
	background-image: url('middle.gif');
}
	
#content {
		margin-top:10px;
		padding-bottom:10px;
		
	}
	
#content div {
		padding:5px;
		border:1px solid #bbb;
		float:left;
		margin-left: 30px;
	}
	
#content-left {
		width:180px;
		
	}
	
#content-main {

		width:505px;
	}
	
#footer {
		float:left;
		margin-top:10px;
		background-image: url('bottom.gif');
		padding:10px;
		height: 40px;
		border:0px solid #bbb;
		width:775px;
	}
	
#bottom {
		clear:both;
		text-align:right;
	}
What could be the problem?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

It's the other way around. Normally it's IE makes a mess of trying to understand the CSS. Opera is a fairly standard-complient browser and usually does it the right way.

Your problem has a few causes. First the box model, which IE interprets differently (search css IE box model)

Then there's the double-margin bug in IE. A div floated left with a left-margin, will get twice that margin in IE. That might lead to the wrapping problem you see.
Post Reply