SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Location
    MA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    little background problem in Firefox

    Hi, I have little problem with my background in FF. On the web design page the background stops abruptly and leaves a white gap at the bottom. If you donít have to scroll, so you have big screen, you will not see it. You could try to make your window smaller (not maximized) and you will probably see it in FF. In IE it looks O.K. Here is the link:http://www.dadasdesign.com/web.php

    It is not big deal, I know, it is just bugging me. If somebody could look at it and give me some idea why is that happening, I would appreciate that.

    Thanks, Dagmar

  2. #2
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Old Code...

    Code:
    * { margin: 0; padding: 0; }
    html { background-image: url(../images/bgr_leaves.jpg); background-repeat: no-repeat; background-position: left bottom; }
    body { color: #666; font-size: small; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; background-image: url(../images/grad_right.gif); background-repeat: repeat-y; background-position: right top; text-align: center; }
    html, body { height: 100%; }
    #wrap1 { width: 100%; height: 100%; }
    #wrap2 { text-align: left; width: 752px; height: auto; margin-right: auto; margin-left: auto; }
    a, a:visited { color: #727ea3; }
    ...
    New Code...

    Code:
    * { margin: 0; padding: 0; }
    body { color: #666; font-size: small; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; background-image: url(../images/grad_right.gif); background-repeat: repeat-y; background-position: right top; text-align: center; }
    html, body { height: 100%; }
    #wrap1 { background-image: url(../images/bgr_leaves.jpg); background-repeat: no-repeat; background-position: left bottom; }
    #wrap2 { text-align: left; width: 752px; height: auto; margin-right: auto; margin-left: auto; }
    a, a:visited { color: #727ea3; }
    ...
    This should fix your problem in Firefox. I haven't been able to test the results in IE though. Let me know how you get on.

    Andy

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Location
    MA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Andy, for trying, but it is not exactly it. Now right (green) background is fine, but there is problem with left background (leaves). I tried exactly what you told me to try, but leaves were aligning with container (at all pages). Then I added height: 100% for wrap1, and it is better, but now left (leaves) background is doing what was right background doing before. Here is the link: http://www.dadasdesign.com/new/web.php

    Dagmar

  4. #4
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is IE, not Firefox. IE incorrectly encloses floated elements. This is NOT correct behavior. Firefox is performing correctly.

    To get modern browsers to do what you want, add overflow:auto; to #wrap1.

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Location
    MA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, that's it! I know that IE is pretending to be the best friend, but it is not.

    The problem now is in IE: two scroll bars, where it supposed to be one, so I don't know if that is fixable or I just have to live with these 2 scrollbars for IE. One scrollbar is scrolling only background and second is scrolling what should be scrolled. Many people are still using IE, and I know they should not, but they, sure, don't know that something better (FF) is here for them to use.

    Edit: it doesn't look good in IE, at all, so I let it be like it was originaly. You can see 2 scrollbars in IE here: http://www.dadasdesign.com/new/web.php

    Dagmar
    Last edited by Dagmar; Oct 7, 2006 at 19:11.

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove overflow: auto from #wrap1. You also don't need to specify height: auto everywhere - auto is what it is by default.

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Location
    MA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I did that. Now IE is O.K., but in FF left background is doing the same what right was doing at the begining. here you can see that: http://www.dadasdesign.com/new/web.php


Bookmarks

Posting Permissions

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