I am new to designing websites and am hoping someone can help. I have a website that I am trying to position elements with background images. These images line up in FF and Safari but not in IE6 or IE 7. There is a considerable gap that should not exist. I also have a problem in IE where the strip I use for my background image is visible under my footer. Again, only in IE. Can anyone help?
Screenshots:
link to site
HTML -
CODE
<body>
<div id="Wrapper">
<div id= "header">
<img id="header" src="images/head_top.jpg" alt="" border="0" /><br>
</div>
<div id="slideshow">
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause, optionalRandomOrder)
new fadeshow(fadeimages, 968, 224, 0, 5000, 0)
</script>
</div>
<div id="nav">
<? include ("includes/mp_nav.htm") ?>
</div>
<div id="content">
<div class="lt_content">
<h2>Welcome to Disciple the Nations.</h2>
<p> </p>
<p><img class="img-left" src="images/welcome.jpg" alt="Welcome to Disciple the Nations" /></p><p>Welcome to the official website of <b>Disciple the Nations, Inc</b>. Our strategy of discipling leaders to impact the world for Christ is now multiplying into the thousands throughout many nations around the world. This core vision is becoming a reality by training disciples on three levels – nationally, internationally, and humanitarily.</p><p> </p><p>Feel free to look around and please don't hesitate to <a href="/contact">contact</a> us if you have any questions.</p>
</div>
<div class="rt_content">
<p> </p><p> </p><p> </p><p> </p>
<p>Be sure to check out the new book <em>30x60x90</em> now being offered by Disciple the Nations.</p><div align="right"><p><a href="../store">Read More</a></p></div>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p>Sign up for our newsletter and stay up to date on events at Disciple the Nations</p>
<form action="/gdform.php" method="post">
<input type="hidden" name="subject" value="DTN Mailing List Submission" />
<input type="hidden" name="redirect" value="../thankyou" />
<p> </p><p><strong>E-Mail:<input type="text" name="email" /></strong></p>
<div id="form" align="right">
<input type="submit" name="submit" value="Sign Up"/>
</div>
</form>
</div>
</div>
<div id="mp_content_bottom">
<p> </p>
</div>
<div id="footer">
<img id="footer" src="images/footer_bg.jpg" alt="" border="0" />
</div>
</div>
<div id="SubFooter">
<p>Copyright© 2008 | Disciple the Nations | Design by <a href="http://www.wordcreative.com" target="_blank">Word Creative</a></p>
</div>
</body>
CSS -
CODE
* {margin: 0; padding: 0;}
body {background: url(../images/bg.jpg) repeat;
font-family: "Helvetica Neue", Helvetica, Verdana, Geneva, sans-serif;
color: #360000;
font-size: 13px;}
h1, h2, h3 {color: #8a1a1c;}
ol {padding-left: 25px;}
ul {padding-left: 25px;}
img.img-right {
float:right;
margin:0px 0px 10px 10px; }
img.img-left {
float:left;
margin:2px 10px 10px 0px;}
#Wrapper {background: url(../images/main_bg.jpg) repeat-y;
width: 968px;
position: relative;
margin: 0 auto;}
#nav {background: url(../images/nav_bg.jpg) repeat-y;
width: 968px;
padding: 0 59px 0 59px;}
#content {
width: 968px;
padding: 5px 65px 10px 65px;}
#content .rt_content {background: url(../images/rt_bg.jpg) no-repeat;
width: 280px;
min-height: 340px;
padding-right: 107px;
float: right;}
#content .rt_content p {color: #8a1a1c; padding-left: 95px; padding-right: 32px;}
#content .lt_content {width: 565px; float:left;}
#mp_content_bottom {background: url(../images/mp_content_bg.jpg) bottom no-repeat;
width: 565px;;
min-height: 220px;
padding: 200px 134px 0px 0px;}
#footer {width: 968px; }
Thank you for you time.