Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    54
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Problem with background image placement in a div.

    Hi all,

    this is a daft one..

    http://www.liamsworld.org.uk/bfcgs/index.html

    In IE the background image for the footer appears just where it should, but in FF Opera and Safari.. the browsers that know I've cocked up somewhere, the image is just under the "topmenu" div. I've spent the last couple of hours wondering why the div itself was in the wrong position until I identified each div with a line of text.. and noticed that the div was correctly positioned, just that the background image has gone astray.

    Before I pull any more hair out.. PLEASE HELP a numpty..

    Cheers

    Liam

    ps. The main site is just a storage facility at the moment, so I know that's rubbish. )

    (Everything validates fine BTW.)


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>Bracknell Forest Golf Society</title>
    
    <style type="text/css">
    
    body { 
      /*background-image: url(bgshadow.jpg);*/
      background-repeat: repeat-y; 
      background-position: center; 
      background-color: #e3eccc;
      text-align: center;  
    }
    
    #container { 
      position:relative;
      width: 800px; 
      height: 830px;
      margin: 0 auto;
      text-align: center;   
    }
    
    #uppertrim {
      position:relative;
      background-image: url(topcurve2.gif);  
      height: 40px;
    }
    
    #banner {
      position:relative;
      background-image: url(bannerbg2.gif);
      top: 0px;
      height: 110px;
    }
    
    #topmenu {
      position:relative;
      background-image: url(menubg2.gif);
      top: 0px;
      height: 40px;
     }
     
     #left {
      background-image: url(leftbg2.gif);
      position:relative;
      float:left;
      top: 0px;
      width: 200px;
      height: 500px;
    }
    
    #content {
      background-image: url(contentbg2.gif);
      position:relative;
      float:right;
      top: 0px;
      width: 600px;
      height:500px; 
    }
    
    
    #footer {
      position:relative;
      background-image: url(bottomcurve2.gif); 
      height: 40px;  
     }
     
     
    </style>
    </head>
    
    <body>
    
    <div id="container">
    
    <div id="uppertrim">uppertrim 800x40</div>
    <div id="banner"></div>
    <div id="topmenu">top menu 800x40</div>
    <div id="left">left div 200x500</div>
    <div id="content">content div 600x500</div>
    <div id="footer">footer 800x40</div>
    
    </div>
    
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,000
    Thanks
    15
    Thanked 234 Times in 234 Posts
    #footer {
    position:relative;
    background-image: url(bottomcurve2.gif);
    height: 40px;
    clear: both;
    }
    Added clear: both; There's more stuff to do but looks like that will be easy to figure out.

  • Users who have thanked DrDOS for this post:

    E-Liam (11-19-2010)

  • #3
    New Coder
    Join Date
    Aug 2005
    Posts
    54
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi DrDos,

    worked a treat in all browsers,

    Now I can get on with the fun stuff..


    Cheers

    Liam


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •