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 1 of 1
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Please help! Background moving on browser resize and footer issue

    Hi

    I really hope someone can help me, this is driving me CRAZY! I'm reasonably new to this, so please excuse me if my coding is a mess.

    Ok, the story is my background is moving to the left, but only on all pages except the home back where the background is set to scroll (the others are fixed). The background image is set within two containers (#container and #containerall) and both perimeaters are the same. Positioning is relative for both of these.

    I am going bonkers trying to fix it, and I don't know any developers! Please help me!

    Here is the css coding. I've taken out everything bar the two containers and the footer, please let me know if you need to see the whole thing. The website isn't live yet, so I unfortunately I can't give you a web address. On a side note, sidebar footer and maincontent footer are within the footer div.

    Any help you could give me would be HUGELY appreciated. I have looked for solutions for this, but can't seem to find it Also, this is happening in every browser I test so far.

    *Update on the footer issue, with it dropping beneath the container. Turns out it was an overflow issue, yay! One resolved! However, I have left the footer in the coding below, as its coming up with a compatibility issue on the browser check. I tried taking the size out but that makes my whole background image dissapear. If anyone can see obvious flaws with this please let me know.*


    Thanks
    Fiona



    html, body {
    margin: 0px;
    padding: 0px;
    }


    /* ^2 --------------- limited-scale reset ---------------- */
    h1, h2, h3, h4, h5, h6, p, div, ul, li {
    margin: 0;
    padding: 0;
    border: 0px;
    }

    p {
    margin: 1em 0;
    }

    #container {
    background-image: url(Home/homepage.jpg);
    background-repeat: no-repeat;
    width: 980px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    position: relative;
    background-position: center top;
    background-attachment: scroll;
    overflow: hidden;
    }

    #containerall {
    background-image: url(web-background.png);
    background-repeat: no-repeat;
    background-position: center top;
    width: 980px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
    }

    .clearboth {
    clear: both;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    }

    #footer {
    clear: both;
    width: 980px;
    }

    #sidebarfooter {
    float: left;
    width: 223px;
    margin-top: 30px;
    margin-right: 20px;
    margin-bottom: 0px;
    margin-left: 40px;
    border-top-width: thin;
    border-top-style: solid;
    border-top-color: #DFA5AD;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.7em;
    color: #BA666D;
    }

    #maincontentfooter {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.7em;
    color: #333;
    float: left;
    width: 632px;
    margin-top: 30px;
    margin-right: 35px;
    margin-bottom: 0px;
    margin-left: 30px;
    border-top-width: thin;
    border-top-style: solid;
    border-top-color: #BA666D;
    }
    Last edited by FionaE; 05-30-2012 at 12:04 PM.


 

Posting Permissions

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