[css-d] Repeat-x problems when the window is smaller than 800x600
Hello, I'm designing a layout where the /header/ and also the /banner/ (under it) use repeat-x to be repeated on the x axis. The problem occurs when I resize the window to 800x600 to see how it looks like on 800x600 desktop and then resize the window a little more - because I want a horizontal scrollbar to appear. Then when I scroll horizontally to right there is a gap on the right side of the /header/ and the /banner/. I would like to repeat the header and the banner till to the window border, but it just stop repeating. Here is the demo of that site: http://www.erikgyepes.com/css/ + the screenshot when that problem occurs: http://www.erikgyepes.com/css/screenshot.png. I'm strugling with this for a long time and I really don't know what to do, if it is a real big issue or is it just a normal behaviour. I think it shouldn't look like this. All help will be appreciated. Thanks to all. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Repeat-x problems when the window is smaller than 800x600
Erik, The problem you are having is not related to repeat-x, but width. Your subwrapper div has a fixed width of 780px. Your body has a min-width of 100%. But the body width does not take into account the width of the subwrapper. (Not 100% sure why). If you change the body min-width=780px, the problem is resolved. Perhaps someone else can explain why 100% does not work properly. Scott --- Erik Gyepes [EMAIL PROTECTED] wrote: I'm designing a layout where the /header/ and also the /banner/ (under it) use repeat-x to be repeated on the x axis. The problem occurs when I resize the window to 800x600 to see how it looks like on 800x600 desktop and then resize the window a little more - because I want a horizontal scrollbar to appear. Then when I scroll horizontally to right there is a gap on the right side of the /header/ and the /banner/. I would like to repeat the header and the banner till to the window border, but it just stop repeating. Choose the right car based on your needs. Check out Yahoo! Autos new Car Finder tool. http://autos.yahoo.com/carfinder/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Repeat-x problems when the window is smaller than 800x600
Hi Scott, Thanks for your advice, it really works, but I still don't know how to solve it in IE6. As you know IE6 doesn't support min-width, so I tried this expression: width :expression(document.body.clientWidth 780? 780px: auto ); for the body, but it didn't worked. Do you have any ideas? Erik Scott Povlot wrote: Erik, The problem you are having is not related to repeat-x, but width. Your subwrapper div has a fixed width of 780px. Your body has a min-width of 100%. But the body width does not take into account the width of the subwrapper. (Not 100% sure why). If you change the body min-width=780px, the problem is resolved. Perhaps someone else can explain why 100% does not work properly. Scott --- Erik Gyepes [EMAIL PROTECTED] wrote: I'm designing a layout where the /header/ and also the /banner/ (under it) use repeat-x to be repeated on the x axis. The problem occurs when I resize the window to 800x600 to see how it looks like on 800x600 desktop and then resize the window a little more - because I want a horizontal scrollbar to appear. Then when I scroll horizontally to right there is a gap on the right side of the /header/ and the /banner/. I would like to repeat the header and the banner till to the window border, but it just stop repeating. Choose the right car based on your needs. Check out Yahoo! Autos new Car Finder tool. http://autos.yahoo.com/carfinder/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
