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 4 of 4
  1. #1
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts

    Background-image position problem in FF1.5

    Ok, this is really bothering me. Hopefully someone can help me out.

    I have a really simple layout like this:
    Code:
    <div id="wrapper">
      <div id="top">
        <!-- Links -->
      </div>
      <div id="bottom">
        <!-- Content -->
      </div>
    </div>
    My CSS for #wrapper and #top:
    Code:
    #wrapper {
      margin: 5px;
      padding: 0;
      width: 770px;
      background-color: #000;
    }
    #top {
      margin: 0;
      padding-left: 30px;
      padding-right: 0px;
      padding-top: 0px;
      padding-bottom: 0px;
      /* width: 740px; - this doesn't change anything */
      color: #000;
      background: #F1F1F1 url("images/home-logo.gif") no-repeat fixed top right;
    }
    Why, oh why, is the background image not staying within the top div container and positioning itself relative to the body of the page in FireFox 1.5? In IE6, it's perfect. It's set on putting the image at the top right of the page rather than the top right of the div container in Firefox 1.5. I thought IE was suppose to be the one bad with rendering CSS I'm probably just way off here, so hopefully someone else has some insight.

    -Shane
    Last edited by TheShaner; 12-15-2005 at 04:28 PM.

  • #2
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    Well, since it wouldn't play nice, I decided to float a div with an image tag with the logo and it works for both. So that is my solution for now.

    Also, I tried setting the width of the html and body to 780px but the image still goes outside that width. It seems that the image will not only overflow its own container, but it will also not adhere to width properties. I only have Firefox1.5 and IE6 to test this, and so far, the problem is only FF1.5, whereas no matter what changes I make, IE6 agrees with me.

    -Shane

  • #3
    Regular Coder
    Join Date
    Apr 2004
    Location
    Birmingham, MI
    Posts
    131
    Thanks
    0
    Thanked 0 Times in 0 Posts
    background-attachment:fixed; on elements other than <body> should be avoided, as IE does not support it.
    It doesn't sound like you want background-attachment:fixed; as you are saying that IE is working perfectly, change to:
    Code:
      background: #F1F1F1 url("images/home-logo.gif") no-repeat top right;
    Last edited by circusbred; 12-15-2005 at 06:44 PM.

  • #4
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    Ah ha! That works perfectly. I thought that the value 'fixed' just meant that it would not be scrolling when using the scrollbar. Getting rid of that made it do what I wanted. Thanks!

    I think I'll now use that since I think it's a safer approach than floating a div container with the image.

    Thanks again.

    -Shane


  •  

    Posting Permissions

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