[56K WARN] Page displays properly in Opera but not in IE
Posted: Sat Aug 04, 2007 4:03 am
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:

This is my HTML:
And my CSS:
What could be the problem?

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>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;
}