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 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    body background problem

    Hi all,

    first of all, thanks for letting me post here
    I have a CSS issue that has cost me already many hours and a lot of headache

    so , what the deal :

    My website is not online yet, but the situation also occurs on www.geenstijl.nl so it seems...

    I have a background image for my body that is always centered. However, if I resize my browser window to a smaller resolution than my background image, the background image keeps moving to the left and screws up my layout.

    You can go to www.geenstijl.nl and resize your window, you will see that also their background image is moving to the left when resizing...

    my css body code is the following:

    body {
    min-width: 990px;
    border:thin;
    font-size:11px;
    background-position:center;
    text-align:center;
    margin: 0 0 1em 0;
    padding: 0 0 1em 0;
    background: url(images/body-bg.png) repeat-y top;
    width: 990px;
    margin-left:auto;
    margin-right:auto;
    font-size: 11px;
    }

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Because you have no 'center' attrtibute in there.

    background: url(images/body-bg.png) repeat-y top center;

    Edit; sorry didn't see that lurking there already.

    Possibly the min-width, but try slimming the code down a bit to find where the problem occurs. I don't see the problem in IE6 or Firefox.
    Last edited by mark87; 10-24-2006 at 10:00 PM.

  • #3
    New Coder
    Join Date
    Oct 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    in IE it works perfect , in FF the background image keeps moving to the left when I resize my window.

    here's my main html code:

    <div id="container">
    <div id="header"></div>

    <div id="header_blackbar">
    <div id="breadcrumb"></div>
    <div id="datestamp"></div>
    </div>

    <div id="navigation_left">
    <div id="categories"></div>
    <div id="sidebar-left">&nbsp;</div>
    </div>

    <div id="content_middle">
    <div id="main"></div>
    <div id="content_right"></div>

    </div>


    that's pretty basic already isn't it?

  • #4
    New Coder
    Join Date
    Oct 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    just to say: it even has the error when using only the body CSS code in my stylesheet and NOTHING else. I guess that's a good example of trimming down the code?

    Am I doing something wrong here by putting the background code into the body ?

    or is it a firefox interpretation error?

  • #5
    New Coder
    Join Date
    Oct 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mark87 View Post
    Because you have no 'center' attrtibute in there.

    background: url(images/body-bg.png) repeat-y top center;

    Edit; sorry didn't see that lurking there already.

    Possibly the min-width, but try slimming the code down a bit to find where the problem occurs. I don't see the problem in IE6 or Firefox.
    maybe a good thing to know is that my background image is e.g. 2000 pixels wide.

    if you try it with that, you'll see what I mean
    Let me know

    thanks


  •  

    Posting Permissions

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