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 11 of 11
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Tiling background not working in IE7, works everywhere else.

    Hello everyone,

    So i went to great lengths to figure out how to tile a background in my main container div so that I could tile a background horizontally in the body tag and then tile a background vertically in the container div.

    I did this using a the code

    html {height: 100%;} /* this is key for a centered fixed width layout */

    body {
    background: url(bg_inside.gif) repeat-x top #969A9C;
    margin:0;
    padding:0;
    height:100%; /* this is the key! */
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    color: #333333;
    }

    #container {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    width: 852px;
    height:100%;
    background: url(bg_container.gif) repeat-y center;
    }



    I got it to work for the most part and it's look pretty good in IE6 and Firefox, safari. BUT it's not working in IE7.

    http://www.aramiinteractive.com/elliott/demo/

    I can't figure out either why the background stops tiling where it stops tiling. You would figure it would at least stop tiling at the end of the content, ie the end of the footer, but it's not doing that either. I would understand if the div tag was absolutely positioned but it's not it's relatively positioned.

    Anyhelp with this would be greatly appreciated!

    thanks so much.

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by edoky145 View Post
    I can't figure out either why the background stops tiling where it stops tiling. You would figure it would at least stop tiling at the end of the content, ie the end of the footer, but it's not doing that either. I would understand if the div tag was absolutely positioned but it's not it's relatively positioned.
    I don't see the issue in IE7. Both background images are tiling fine. No big difference between IE7 and Firefox 2 rendering. Can you provide a screen shot of what you are seeing?

  • #3
    New Coder
    Join Date
    Apr 2007
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Really you don't see the issue? I have posted a screen shot here

    http://www.aramiinteractive.com/elli...iottscreen.jpg

    Is it possible you could send me a screenshot of what you are seeing in IE7?

    thanks
    eddie

  • #4
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts
    i dont know if this is going to fix anything but to avoid errors i used to get i used to forget compiling all the background elements into one tag and now use the full -color, -position, -image etc... that might fix it.
    Daniel Warner
    - - - - - - - - - -
    GuitarMart.co.uk - Free Online Classified Advertisement for Guitarists in the United Kingdom. Free Ads with a Free Photo.

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by edoky145 View Post
    Is it possible you could send me a screenshot of what you are seeing in IE7?
    My IE7 screen shot is here

    The link you posted to your screen shot is not working.

  • #6
    New Coder
    Join Date
    Apr 2007
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hello again,

    thanks for all the help koyama. I can't understand why it was only an issue on my coworkers laptop. strange.

    I asked a few other people to look at if for me in IE7 and they said it looked fine. WTF?

    thanks again

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by edoky145 View Post
    Hello again,

    thanks for all the help koyama. I can't understand why it was only an issue on my coworkers laptop. strange.

    I asked a few other people to look at if for me in IE7 and they said it looked fine. WTF?

    thanks again
    Were any of them on Windows Vista? People have said IE7 on XP and IE7 on Vista have slight differences. This could be one of them. If thats the case then the background position in the background declaration is missing left, right, or center though default is top left. You have just top in there. No point having that. That could also be the issue.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New Coder
    Join Date
    Apr 2007
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Were any of them on Windows Vista? People have said IE7 on XP and IE7 on Vista have slight differences. This could be one of them. If thats the case then the background position in the background declaration is missing left, right, or center though default is top left. You have just top in there. No point having that. That could also be the issue.
    Nobody i even know has windows vista yet haha. So i couldn't really be sure if that is a difference between them. Thanks for the tip. Must have left that in there by accident.

  • #9
    New Coder
    Join Date
    Apr 2007
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts
    So i've finally managed to recreate the problem I was having. It seems that if all the content fits on the page (no scroll bar) then the background image tiles fine in all browsers. However, if the content does go beneath the fold and the window requires a scrollbar then the tile does not always tile correctly. Here is what I have found out.

    1. IE6 - everything works fine (for once!)

    2. Firefox and IE7 - the background image will only tile as far as the bottom of the fold. Once you scroll down beneath the fold then you can see that is where the background stops scrolling. For example on the following page. The content is a little longer.

    I guess the "100%" only accounts for 100% of the current screen for those browsers for some reason and not anything past the fold.

    http://www.aramiinteractive.com/elli...te_request.htm

    I've run out of things that i can try. Any suggestions?

    Thanks for all the help.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Use min-height:100%; instead of height:100%; on #container. You will need to give a height of 100% to IE6 since it doesn't support min-height.
    Code:
    /*targets IE6 and below and hides from IE Mac\*/
    * html #container { 
    height:100%;
    }
    /*end fix*/
    Some people will say not to use the above because it breaks in IE7 but in this case we aren't even trying to target IE7 so why not use it?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    New Coder
    Join Date
    Apr 2007
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hmmm this worked. But created the reverse problem.

    For the pages that don't require the scroll bar ( ie no content below the fold ) now the background doesn't tile all the way to the bottom of the page.

    thanks for the effort though!


  •  

    Posting Permissions

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