pianopaul

# May 28, 2008 at 3:39 pm

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

cybershot

# May 29, 2008 at 1:05 am

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.

mkyuzo

# June 13, 2008 at 10:58 am

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

mkyuzo

# June 13, 2008 at 11:05 am

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

bcbounders

# June 13, 2008 at 7:25 pm

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

wesbaker

# August 28, 2008 at 3:10 pm

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;
}