Hello,
I’m working on a site where the CSS layout renders correctly on Firefox and Safari but not IE. I’ve simplified the site and uploaded it here:
http://www.geocities.com/hyojin_hwang/test.html
In IE, the red borders are not lined up as they are in Firefox. In addition, there is some extra space between the banner and the bottom content.
The code is here:
<html>
<head>
<style type="text/css">
body {
color: #4F4F4F;
margin: 0px;
padding: 0px;
text-align: center; }
#container {
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding: 0px;
background-color: grey;
border: 1px solid #4F4F4F;
min-width: 820px;
text-align: center; }
#banner {
height: 200px;
margin: 0px;
padding: 0px;
background-color: blue;
min-width: 820px;
text-align: center; }
#content {
margin-left: auto;
margin-right: auto;
padding; 0px;
background-color: yellow;
text-align: center;
border-right: 5px solid #A52A2A;
border-left: 5px solid #A52A2A;
width: 754px;
voice-family: "\"}\"";
voice-family: inherit;
width: 744px; }
html>body #content {
width: 744px; }
#leftcontent {
float: left;
width: 170px;
padding: 5px;
margin: 0px;
border-right: 1px solid #B4B4B4;
background-color: orange; }
#rightcontent {
margin-left: 170px;
padding: 5px;
background-color: #green;
text-align: justify; }
</style>
</head>
<body>
<div id="container">
<div id="banner" valign=bottom>
<img src="http://www.geocities.com/hyojin_hwang/w45650959.jpg" border=0 style="margin: 0px; padding: 0px">
</div>
<div id="content">
<div id="leftcontent">
</div>
<div id="rightcontent">
</div>
</div>
</div>
</body>
</html>
Can someone please take a look at it and tell me what I may be doing incorrectly?
Thanks for your help!