IE cuts off faux column background image

In Firefox, this displays correctly. In IE, the faux column background image only goes down as far as the left column does. For the life of me, I can't figure out why; I've tried a few things to no avail. If you have any ideas as to why it's not working, I'd appreciate the help. Thanks in advance.

HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="http://www.example.com" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
 <!--[if IE]><link rel="stylesheet" type="text/css" href="style/ie.css" /><![endif]-->
<title>This is my title</title>
</head>
<body>
<div id="content">
<div id="wrapper">
 <div id="header">
 (Address of business)
 </div>
</div>
<div id="wrapper2">
 <div id="sidebar">
 <div id="sidebox">
 (Series of links)
 </div>
 </div>
 <div id="main">
 <div id="main2">
 <div id="title">Title</div>
 Content.
 </div>
 </div>
 <div id="footer">
 Footer
 </div>
</div>
</div>
</body>

Stylesheet:


div#header {
 text-align: center;
 font-weight: bold;
 color: #FFFFFF;
 margin-left: 150px;
 padding-top: 10px;
}
div#content {
 overflow: auto;
}
div#head1 {
 text-align: center;
 font-size: 21px;
}
div#head2 {
 font-size: 19px;
}
.foot {
 font-size: 10px;
 text-align: center;
}
.foot a {
 color: #000099;
 text-decoration: none;
}
body {
 font-family: Arial, Verdana, Helvetica, sans-serif;
 background-color: #D0DDFF;
 font-size: 15px;
}
div#wrapper {
 position: relative;
 margin:0 auto;
 width: 750px;
 height: 125px;
 background-image:url('header.png');
}
div#wrapper2 {
 position: relative;
 margin:0 auto;
 margin-bottom: 5px;
 width: 750px;
 background-image:url('border.png');
}
#sidebar {
 float: left;
 width: 150px;
 min-height: 500px;
}
#sidebox {
 border-width: 2px;
 border-color: #000000;
}
#main {
 float: right;
 width: 600px;
 padding: 5px 5px 15px 10px;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}
#main2 {
 margin-right: 5px;
 overflow: auto;
}
#footer {
 clear: both;
}

IE-specific Stylesheet:


#main {
 position: absolute;
}
#main2 {
 margin-right: 10px;
}

IE cuts off faux column background image

ral315

ral315

swa66

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week