Hello,
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. HTML and CSS both verified.
Can anyone help?
Screenshots:
Link to site
Here is the code:
HTML -
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Disciple the Nations</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="STYLESHEET" type="text/css" href="includes/styles.css" />
<link rel="STYLESHEET" type="text/css" href="includes/nav.css" />
<link rel="stylesheet" href="includes/css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<script src="includes/scripts/mootools.js" type="text/javascript"></script>
<script src="includes/scripts/jd.gallery.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showInfopane: false,
showCarousel: false,
embedLinks: false,
delay: 5000,
fadeDuration: 2000 });
document.gallery = myGallery;
}
window.onDomReady(startGallery);
</script>
<div id="Wrapper">
<div id="Header"><img id="headerpic" src="images/head_top.jpg" alt="" border="0" /><br /></div>
<div id="Slideshow">
<div id="myGallery">
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<a class="open"></a>
<img src="images/switch1.jpg" class="full" alt=""/>
</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="images/switch2.jpg" class="full" alt=""/>
</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="images/switch3.jpg" class="full" alt=""/>
</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="images/switch4.jpg" class="full" alt=""/>
</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="images/switch5.jpg" class="full" alt=""/>
</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="images/switch6.jpg" class="full" alt=""/>
</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="images/switch7.jpg" class="full" alt=""/>
</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="images/switch8.jpg" class="full" alt=""/>
</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="images/switch9.jpg" class="full" alt=""/>
</div>
</div>
</div>
<div id="nav">
<span class="preload1"></span>
<span class="preload2"></span>
<ul class="menu2">
<li class="top"><a href="http://www.disciplethenations.com" id="home" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="/about" id="aboutus" class="top_link"><span class="down">About Us</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="/bio">Biography</a></li>
<li><a href="/story">Our Story</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="/ministries" id="ministries" class="top_link"><span class="down">Ministries</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="/national">National</a></li>
<li><a href="/international">International</a></li>
<li><a href="/humanitarian">Humanitarian</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="/gallery" id="gallery" class="top_link"><span>Gallery</span></a></li>
<li class="top"><a href="/donate" id="donate" class="top_link"><span>Donate</span></a></li>
<li class="top"><a href="/store" id="store" class="top_link"><span>Store</span></a></li>
<li class="top"><a href="/links" id="links" class="top_link"><span>Links</span></a></li>
<li class="top"><a href="/contact" id="contact" class="top_link"><span>Contact Us</span></a></li>
</ul>
</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="footerpic" 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>
</html>
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;}
#Wrapper {background: url(../images/main_bg.jpg) repeat-y; width: 968px; position: relative; margin: 0 auto;}
#Header {height: 99px; }
#Slideshow {height: 224px; }
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;}
#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;
display:inline;
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; }
#form { padding-right: 25px;}
#SubFooter {color: #8a1a1c; font-size: 11px; margin: 0 auto; margin-top: 5px; width: 968px; text-align: center; padding-bottom: 5px;}
#SubFooter .prog {font-size: 10px!important;}
#SubFooter a:link, #SubFooter a:visited {color: #8a1a1c; text-decoration: underline;}
#SubFooter a:hover, #SubFooter a:active {color: #360000; text-decoration: none;}
Thank you for your time. |
