Page Shadow Challenge

**jethrodesign** · Jan 26, 2012 16:54

Hi,
We're trying to figure out a 'creative' way to wrap our main page content area with a drop-shadow so it stands out from the main body background a bit, BUT have the bottom shadow under the footer ONLY show up when the page is short enough for there to naturally be space under the footer.

NOTE: You will probably need a screen resolution of at least 1280x1024 to really see the issue, otherwise the browser may not be tall enough.

Here's a test site showing you what we've done and how it should look on short pages: Short page example.

You'll see that we have 2 DIVs wrapping our main content area (#topImage and #bottomImage). So we put the main repeating background with the side shadows on the #topImage DIV, and a bottom 'capper' image with the bottom shadow on the #bottomImage DIV. For the bottom shadow image to show up, we had to add the bottom padding so it would extend below the footer.

So this works fine for short pages, but now look at a longer page that would cause the browser window to scroll: Long page example.

What we would PREFER for these longer pages that require scrolling is that scrolling down would not extend to the bottom drop-shadow, but instead stop at the bottom of the footer (#footer - dark wine-red DIV in example). We don't like the way it extends down to show the extra space and bottom shadow. Of course this happens because of the bottom-padding we had to add for it to show up at all.

Any creative/different way we could approach this with CSS??
If this isn't possible with just pure CSS, would we need a JS solution? If so, any instructions on how to pull this off as simply and lightly as possible (we're already loading the jquery library)?

THANKS!

**Paul O'B** · Jan 26, 2012 17:28

Hi,

You could use the sticky footer approach and avoid the issue altogether.

Here's an example.

The footer is always at the bottom of the page so the shadows can be on the body background. the footer will always be at the bottom of the viewport if pages are short or at the bottom of the document on longer pages. You can read up on the technique in the CSS faq (see my sig).

**jethrodesign** · Jan 26, 2012 17:50

Thanks for the reply!

We've thought about something like that, but don't really care for the extra page space that can happen on the bottom of certain shorter pages. We would prefer the bottom page margin under the content (before the footer) to remain consistent. But we'll keep this in mind if we run out of other options. Thanks.

- Any other options closer to what we are shooting for?

**Paul O'B** · Jan 27, 2012 04:58

Hi,

I should have saved this for one of my CSS quizzes but you can do it for IE8+ like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
html, body {
	height:100%;
	margin:0;
	padding:0
}
#wrap {
	height:100%;
	width:100%;
	display:table;
	overflow:hidden;
}
*+html #wrap { min-height:100% }
#outer {
	background:red;
	position:relative;
	width:800px;
	margin:auto;
	padding:1px 0;
}
#foot {
	height:50px;
	background:blue;
	width:800px;
	margin:auto;
	position:relative;
}
#shadow {
	position:absolute;
	margin:50px 0 0 -50px;
	width:900px;
	background:#000;
	height:100px;
}
</style>
</head>

<body>
<div id="wrap">
		<div id="outer">
				<p>test</p>
				<p>test</p>
				<p>test</p>
				<p>test</p>
				<p>test</p>
				<p>test</p>
				<p>test</p>
		</div>
		<div id="foot">
				<div id="shadow"></div>
		</div>
</div>
</body>
</html>

The secret is the 100% high display:table element which has overflow:hidden added. That allows anything less than 100% to show but cuts off anything once below the fold. The inner content is ok because tables always expand the 100% height and treat it like min-height so the actual content doesn't get cut off.

Needs to be tested first but seems to do the job

**jethrodesign** · Jan 27, 2012 16:16

Thanks again for the reply. And that's the kind of out-of-the-box thinking we were hoping for! Wouldn't have thought of that.

We did try working this into our real site (I can mock it up for the test site above if I need to) and it does seem to work perfectly - UNTIL we checked it in IE7 : (

You state that it will work for IE8+. But is the '*+html #wrap' style to make it degrade 'nicely' in IE7? We tried adding that, but still no go. We see the site to the fold, but when we scroll down we only see the background (foreground is being cutoff at where the fold was).

Please tell me there's a way to get it to at least degrade nicely in IE7! We guarantee our sites to work on IE7 or newer, but a lot of the audience for these sites will be pretty low-tech. So a lot may be using IE7 (or worse - YIKES!).

Thanks again for the great help here!

**Paul O'B** · Jan 27, 2012 17:20

Originally Posted by jethrodesign

Thanks again for the reply. And that's the kind of out-of-the-box thinking we were hoping for! Wouldn't have thought of that.

We did try working this into our real site (I can mock it up for the test site above if I need to) and it does seem to work perfectly - UNTIL we checked it in IE7 : (

You state that it will work for IE8+. But is the '*+html #wrap' style to make it degrade 'nicely' in IE7? We tried adding that, but still no go. We see the site to the fold, but when we scroll down we only see the background (foreground is being cutoff at where the fold was).

Please tell me there's a way to get it to at least degrade nicely in IE7! We guarantee our sites to work on IE7 or newer, but a lot of the audience for these sites will be pretty low-tech. So a lot may be using IE7 (or worse - YIKES!).

Thanks again for the great help here!

If you try my little stand alone demo above it works pretty well in IE7 and should behave just as your existing page does now. The *+html hack is changing the height:100% to min-height:100% so the overflow:hidden should have no effect. The hack must follow the original rule as per my demo.

If you have your test site online I'll take a look and see what's causing the problem. IE7 doesn't understand display:table anyway and just ignores it but you may have run into some other bug along the way.

I'll be back tomorrow - time to sleep now

**jethrodesign** · Jan 27, 2012 19:31

Thanks for the help. I went ahead and added the changes to the test site listed above. So those are displaying properly in FF/Safari, but not in IE7 (haven't tried any other IE flavors yet).

I did add your *+html hack just below the style for the wrapper DIV that is set to display as a table (#topImage in our case). But it doesn't appear to do anything.

The only way I was able to get it to work in IE7 is to add '*overflow: visible' to the wrapper DIV after the 'overflow:hidden' declaration. But then it has the extra bottom padding on all pages to show the footer shadow. This might work in a pinch if nothing else is possible.

NOTE: This template will be used to generate different websites, some which may use a different header/footer method (like having them span the entire viewport width, or using 'sticky footers'). So we may have some extra styling and formatting in place to make those changes much easier to implement. But I tried disabling a couple obvious things to no avail.

**Paul O'B** · Jan 28, 2012 03:20

Hi,

Ok this is definitely working as I copied your site locally to test.

Code:

*+html #topImage { min-height:100%;height:auto }

The height:auto is needed to cancel out the 100% in IE7 and will work exactly as before.

**jethrodesign** · Jan 30, 2012 15:06

Thanks again Paul for the help!

I added the 'height: auto' to the rule exactly as you are specifying on the test site. So you can see this now.

But when you say that it is 'working' in IE7, do you mean the same way as all other browsers (including IE8) where long pages stop scrolling at the bottom of the footer? Because it doesn't appear that way to us here. We see the extra space for showing the bottom shadow on all pages, whether there is scrolling or not.

Just want to make sure we're seeing it properly or not expecting more than is possible. Again, if this is the best IE7 can do we can probably live with that to get the proper functionality everywhere else.

Thanks!

**Paul O'B** · Jan 30, 2012 15:55

Hi,

Yes I meant it will look like you had it originally in IE7 and will not appear broken but will just rise upwards to show the shadow. There doesn't seem to be a solution that will satisfy IE7 (or not one that I've found yet) so IE7 gets what it always would have had but newer browsers get the revised version that you wanted.

**jethrodesign** · Jan 30, 2012 16:22

OK, Got it. Thanks for the unique solution! At least it works properly for the majority of visitors, and degrades decently if IE7. And we can always use sticky footers (with the possibility of spanning headers/footers if we want) for variety.

Thanks!

User Tag List

Thread: Page Shadow Challenge

Thread Tools

Display

Page Shadow Challenge

Bookmarks

Bookmarks

Posting Permissions