Hi guys, I'll start with a little bit of background. It's been decided (from up on high) that our new site will be fixed width at 1000px. Means it fits nicely in a 1024x768 screen, anyone smaller gets a bit of sideways scroll, and anyone larger sees colour off to the sides. Not a problem. Then my boss decided he wanted there to be a bit of shadowing down each side of the main box to make it (in his words) three-dimensional and more exciting. Well, it's a fixed width design, so no problems there. A graphic a little wider than 1000px put as a centred background on the body fixes that.
The trouble is that some of the pages don't reach all the way to the bottom, particularly on larger resolutions. So what you end up with is the shadow graphic continuing on under the footer, which just looks plain silly. I originally though of putting the background inside a wrapping div, so that it didn't extend beyond the content, but this then causes 1024x768 screens to have sideways scroll just for the sake of the shadow. This also strikes me as silly, not to mention inelegant. So I decided that the best way to go about it would be to create a page that would stretch to 100% of the screen height if there was less than a screen's worth of content, and would extend seamlessly past the end of the screen if there was a lot of content. So far so good. I found an article that seemed to be what I was after: http://www.geekicon.net/geek/index.shtml/article/643 I created a pair of test pages, mainly to play around with the footer and see if I could get it to behave itself (I hate footers). It worked in both IE/Win and Firefox, so I figured I had it nutted. You can see my test cases here, if you're interested: http://staging.renovate.com.au/test.cfm (there's a link on it to the second test case) So now we get to the problem bit: Neither Firefox nor IE are extending the background to the bottom on short pages. Why not? It does in the test case. And aside from a more complex filling, I can't find any differences. Have a look at this page at a resolution of greater than 1024x768: http://staging.renovate.com.au/clubreno/index.cfm Can anyone suggest what I've missed? I'm pretty sure that I've brought across everything I needed to from the test cases, so I can't figure out why it's not working. Cheers, Seona. ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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/
