Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS disappearing css bg graphics!

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #22711
    pianopaul
    Member

    I dropped in looking for a solution to a problem that I’ve run across with several sites; when a semi-complex group of divs/tables with various background graphics are displayed in FF2 or IE7, and the user "squishes" the browser, then scrolls horizontally, the backgrounds are clipped by the minimized edge, leaving just a white background from there on. Have you seen this, or solved it? I’ve seen it for instance on Verizon’s site http://www22.verizon.com/ and many others. Is this a browser bug or is there a css workaround that you know of?

    Here’s an example page that I mocked up to demonstrate the behavior, too:

    http://senna.sjsu.edu/psmith/media/css- … pping.html

    Thanks, Paul Smith

    #47612
    cybershot
    Participant

    Are the elements you are talking about floated? Because i do believe that if you float two divs next to eachother then try to resize the window. then the second div that comes in your markup will move because the room it was sitting in became alot smaller.

    #47923
    mkyuzo
    Member

    I believe what is happening is that the div(s) in question is/are sizing to the exact width of the visible area of the browser window, so when you scroll to the side, the ’empty’ space actually is empty. You can verify this by setting a min-width value in firebug and adjusting the width up and down. To correct for this issue you could use the min-width to set a value that is equal to the minimum width of the rest of the pages content. There may be other ways around this as well, but that seems to be the quickest fix. I’ll see if I can come up with a more dynamic solution this weekend.

    Best Regards,
    Mike

    #47924
    mkyuzo
    Member

    Actually, this could all probably be avoided by wrapping the page in a container div, and then setting the header area div to width: 100%. I think part of the problem with the sites you used in your examples is that the header area appears to be outside of the main content div, so the nav width doesn’t stretch to match the widest part of the main content, so it adjusts to fit inside the visible width of the window, not the scrollable width. I could be wrong though, I’ll have to test this out later.

    Mike

    #47928
    bcbounders
    Participant

    Just as an FYI… this also happens in Safari 3.1.1 on OS X 10.5.3. Just in case anyone was curious! ;)

    #49468
    wesbaker
    Member

    I fixed this problem using a min-width in the same vein as the min-height fast hack.

    Code:
    #container
    {
    min-width: 1000px;
    width: auto !important;
    width: 1000px;
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.