SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Threaded View

  1. #1
    SitePoint Addict
    Join Date
    Jul 2004
    Colorado, USA
    0 Post(s)
    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:
    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;
    .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). ( 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 14:28.
    Terri Eades - Web/Graphic Designer -


Posting Permissions

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