Help - Search - Members - Calendar
Full Version: IE problems with Div background images
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
Scotty
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. Can anyone help?

Screenshots:

IPB Image

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.

Darin McGrew
I recommend that you start by fixing the markup errors and CSS errors reported by the online tools.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.