SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Colorado, USA
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Peculiar "background-image" problem

    The subject pretty much says it all! Although I've known CSS for years, I have just recently begun make entire layouts with it. In any case, here is the CSS code I'm working with:
    Code:
    body {
    background-color: #000000;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    margin-top: 0px;
    margin-bottom: 0px;
    background-image: url(../images/background.jpg);
    background-attachment: scroll;
    background-position: top left;
    background-repeat: repeat-x;}
    
    div#container {
    background-image: url(../images/containerbg.jpg);
    background-repeat: repeat;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    height: auto;}
    
    div#footer {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    width: 800px;}
    
    div#header {
    width: 606px;
    float: right;
    background-color: #ffffff;
    height: inherit;}
    
    div#right {
    background-image: url(../images/right.jpg);
    float: right;
    height: 500px;}
    
    div#menu {
    float: left;
    width: 144px;}
    
    .pagenav {
      text-align: center;
      font-size: 11px;
      font-weight: bold;
      border: 3px double #cccccc;
      width: auto;
      background: url(../images/button_bg.png) repeat-x;
      padding: 0px 10px;
      line-height: 20px;
      margin: 1px;
    }
    
    .pagenavbar {
        margin-right: 10px;
        float: right;
    }
    
    a:link, a:visited {
        color: #B10101; text-decoration: underline;
        font-weight: normal;
    }
    
    a:hover {
        color: #B10101;    text-decoration: underline;
        font-weight: normal;
    }
    
    .contentheading {
        height: 30px;
    
        color: #B10101;
        font-weight: bold;
        font-size: 14px;
        white-space: nowrap;
    }
    
    .contentpagetitle {
        font-size: 13px;
        font-weight: bold;
        color: #B10101;
        text-align:left;
    }
    
    .componentheading {
        background: url(../images/subhead_bg.png) repeat-x;
        color: #B10101;
        text-align: left;
        padding-top: 4px;
        padding-left: 4px;
        height: 21px;
        font-weight: bold;
        font-size: 10px;
        text-transform: uppercase;
    
    }
    If you look at "div#container," you'll notice I have a background image applied to it. This image comes up fine in IE 7, but not in Safari or Firefox 2 (on a PC). (http://www.artyme.com) All other images show up, no matter what the browser. What is especially weird is I am working on another site with container code almost EXACTLY like the code used on this site, and it's background images shows up in all browsers, including Firefox.

    Any ideas on how to fix this perplexing problem??

    Edit: I THINK I perhaps figured it out. It has to do with how Firefox and Safari order the div's.
    Last edited by Perfectionist121; Sep 23, 2007 at 13:28.
    Terri Eades - Web/Graphic Designer - www.terrieades.com

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yea looks like you got it as it looks ok to me.


Bookmarks

Posting Permissions

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