This is the celebrated journal of Mr. Simon Collison A.K.A Colly

Image fades for overflow: auto

27th July 2005

Here’s a no-brainer for getting a bit more out of overflows. I love overflow: auto trickery (whereby specifying the height of a div and applying overflow: auto creates a mock iframe without all the accessibility headaches of the latter), but it always bugged me that whatever is being scrolled inside the div gets cut off crudely at the div’s base.

How do you encourage the user to keep scrolling to read the rest? I liked the way Mr. Inman had added the delicate fade at the base of the More browser window, and thought this might work well in the overflow. Haven’t looked how he did it, but here’s my overflow example. Read on for the simple solution.

image

A little extra CSS and XHTML

Starting with the CSS. Create an overflow div as normal, but make sure you specify position: relative. Also, note the stream_fade class. Again, mark it position: relative.

.stream {
position: relative;
width: 220px;
height: 236px;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
padding: 0 5px 5px 0;
line-height:130%;
background-color:#FFF;
overflow: auto;
}

.stream_fade {
position: relative;
height: 40px;
width:205px;
margin-top: -41px;
}

With stream_fade, you’re basically creating a div that is the exact size of the fade PNG that will create the affect, and pulling it up (with a negative margin) over the overflow window. My image will be 40px high, but I’m pulling it up 41px to push it above the bottom border of my overflow window.

Next, one straightforward addition to the usual overflow div markup.


<div class="stream">
<p>All the stuff you wanna scroll goes in here.</p>
</div>
<div class="stream_fade"><img src="scripts/fade.png" 
alt="" width="205" height="40" /></div>
The fade image

Grab a 205px width x 40px height fade PNG. It’ll be there, but it’s white, so reach around for it. Be sure that your fade image is exactly the right width. It needs to be the width of the scroll area, minus the width of the actual scrollbars. Oh, and I wanted to use a PNG so that it would work with any background colour. If you’re clever, try it with a transparent gif, in order to avoid the next problem.

IE hates PNG

PNGs don’t work on IE. Bah! Make sure to stick your stream_fade class in another stylesheet for IE users, and hide it with display:none. Otherwise, they’ll see a big nasty block where the fade should be. Here’s how I’m hiding it from IE6. Firstly, this in the head of your page:


<!--[if IE 6]>
Stick your IE6 stylesheet links in here
<![endif]-->

And then place this alternative class in the IE stylesheet:


.stream_fade {
display: none;
}
Not exactly brain surgery…

...but it works, and helps me come to terms with overflows. View the example.

UPDATE: Many thanks to Musher for letting me know about this Javascript technique to handle PNG transparency in Win IE 5.5 or higher.

Responses

# Joost van der Borg responded on 27th July 2005 with...

Nice effect, I’ve just got two small problems:
1. If you try to select text currently under the ‘fade’-image, you can’t. Just a minor issue, but still annoying, for instance, links probably won’t work either.

2. It would be smart to set the contents in the div so that when you reach the end of the text, all text is above the fade..

# Colly responded on 27th July 2005 with...

Joost: Good points. On the model used for the client, we are setting the final overflow text above the fade, just incase. I always shunt overflow text up anyway - it should never be flush with the bottom of the container.

Alas, you’re right about links not working under the fade area, but they’re not really properly visible until scrolled up past it anyway. It’s not a problem for me, but fully understand if anyone finds it a bit of an accessibility no-no.

# Jeff Wheeler responded on 27th July 2005 with...

Neat trick, but Joost’s first point drives me batters. Other than that, it’s pretty neat. Good job.

# evan responded on 27th July 2005 with...

nice trick, i wish IE would pick up the pace though.

# Craig C. responded on 27th July 2005 with...

The condition “if IE 6” will only serve the alternate style sheet to IE 6.x, while IE 5.x still breaks. It might be better to use “if lte IE 6” (less than or equal to) to cover IE5 as well.

Supposedly IE7 will finally support alpha transparency in PNG, so assuming IE7 also continues to support conditional comments you should be able to use “if lt IE 7” to cover all current versions while looking forward to the next.

And since we’re giving IE an alternate stylesheet anyway, you might be able to fake the fade with filter: alpha(opacity=30);.

# ross responded on 27th July 2005 with...

Why not set the relative position to top: -41px; as opposed to bashing the top margin?

Wouldn’t it be better to use the PNG as a background image in the CSS so that it can be tesselating, and tied to the form and not the content?

# Simon Collison responded on 27th July 2005 with...

Ross: You can’t do this with a background image. Or I couldn’t anyway.

Craig C: Like it.

# Julian responded on 27th July 2005 with...

Good idea!
I tried it with a background image and it worked… just set the image used in the div as background for the stream_fade…

.stream_fade {
background:url(fade.png);
}

And then just the fade-div without the image in it.

Works in Firefox and Opera. Or am I missing something?

# Simon Collison responded on 27th July 2005 with...

Julian: Cool. For some reason it wouldn’t work on Safari when I was testing, but then I was fiddling with the CSS so much I may have mis-timed my experimentation. If it works in FF I guess it works in Safari. Nice one you, and nice one Ross.

Half the point of me putting this stuff out is to get feedback. For example, I now know I can use a bit of JS for IE. Good stuff…

# Phil Renaud responded on 27th July 2005 with...

good lord, that’s sexy.

# Michael Newton responded on 28th July 2005 with...

Be sure that your fade image is exactly the right width. It needs to be the width of the scroll area, minus the width of the actual scrollbars.

What happens if the image isn’t the perfect width?
Just curious, because I wouldn’t expect all browsers on all platforms to have identically wide scrollbars.

# ross responded on 28th July 2005 with...

And the use of negative margin?

I wonder if negative top position is better, then you could use the negative bottom margin to pull the content into the old space the div stream_fade still “occupies” before being repositioned (MacIE won’t respect it though).

Oh whilst we are being picky, it’s generally a good idea to not use underscores in class-names.

Hence suggested naming conventions also not using them ;)

# jonb responded on 28th July 2005 with...

You can include PNG support in IE using just CSS - no javascript at all - all the javascript does is loop through teh document looking for PNGs to apply the IE proprietry alphaImageLoader css filter - it’s neat because if you use lots of PNGs with transparency it’s a pain to hard code all the hacks in your CSS, however for just one class it’s no big deal.

# Brad Chmielewski responded on 28th July 2005 with...

Great!  Thanks for the information. Going to update a site today with this trick.

# Su responded on 28th July 2005 with...

I’ve done this with a layout I’ve been experimenting with for a while, but I wonder what’s with the negative positioning at all(margin or top)? I find negatives counterintuitive in general so try to avoid them. The .stream div is already relative, just put the fade inside it(part of the block anyway) and position absolutely, no?

Also, why bother with the .stream_fade div at all? Positioning the image on its own works fine.

Julian: Using the image as a background works in and of itself, but can introduce problems if you want to recycle one image for differently-sized boxes. IE7’s PNG hack(based on the WebFX hack), for one, breaks if the background PNG has to tile. I’m not sure if the one above has the same issue, but from what I’ve seen, they all pretty much have the same limitation.

(What’s “stream_space” for?)

# Simon Collison responded on 28th July 2005 with...

Su: .stream_space? Yes, I left that in the markup in the example didn’t I? Oops. And I didn’t leave the CSS for it. Tut-tut.

I used .stream_space to ensure a 40px margin at the end of the scrolled text so that it appeared over the fade image (exactly what Joost was talking about in the first comment). I’d stripped it out to keep things simple, but as ever you lot want it in detail.

Everyone: I just made this thing work and talked about it straight away. I never said it was perfect, or that I’d honed it to perfection or anything. Just thought I’d share some inspiration…

Besides, you lot are all smart enough to hone it yourselves by the sounds of it.

# ross responded on 29th July 2005 with...

Awww c’mon ;)

It’s on your blog now, so lets all get together (as we are doing) and finesse it till its “suh-weet” as they say.

# Simon Collison responded on 29th July 2005 with...

Sorry, readers. My comment wasn’t supposed to seem so arse-y.

Been fighting a very bad migraine for two days - it’s starting to get to me…

# Rob Mientjes responded on 29th July 2005 with...

I once did something akin. In fact, Jina uses it in her current design :)

I do like the idea of the fade, though. Nice.

# Ash Haque responded on 10th August 2005 with...

“Using IE or some antiquated crap? You see a big nasty block where the PNG is. If I cared about you, I’d hide the fade class from you by giving you your own stylesheet.”

LoL

# Ryan Heneise responded on 10th August 2005 with...

You can make this work in IE pretty easily. For an example, go to www.harmandermatology.com. Note the flowers placed just behind the main image - these are transparent PNGs, and they work just find in IE.

The only caveat is that in this application you’d have to use sizingMethod=‘crop’, and then make the fade image longer than or the same width as the text box. That should fix the scaling and tiling issue.

# Craig C. responded on 10th August 2005 with...

Hey gee I just noticed my conditional comments were wrong. Should be “if IE lte 6” and/or “if IE lt 7”.

And, of course, since this posting the first IE7 beta was released and 24bit PNG with alpha transparency is indeed supported. Yay!

# A* responded on 10th August 2005 with...

Nice effect.  Even better is the ‘If I cared about you, I’d hide the fade cla…’ line!

# Martin Kool responded on 11th August 2005 with...

I did something very similar for my previous version of oddend.com and I used a transparant gif for Msie (mimicking the fade effect using transparant pixels). It works, but it’s not the nicest solution.

I didn’t really like using HTC for Msie because in my experience it was a bit glitchy.

It’s a nice gimmick, but in my opinion a bit of a high risk of display problems.

# Jonathan responded on 19th August 2005 with...

If you use .stream:after and a background transparent png insead .stream_fade, you don’t need to specifiy an alternate stylesheet for IE, and it would be hidden from old browsers too.

The code will be something like this (i’ve not tested yet, but i think it would work. Maybe it needs a little corrections):

.stream:after {
content: “”;
display: block;
height: xx;
width: yy;
margin-bottom: -xx;
background: url(transparent_png.png) repeat-x;
}

Responses are now disabled Your ability to respond is disabled automatically some 30 days after articles are published, or manually much sooner if spamming guttersnipes target a particular article.

Prev 465 Next

Superfluous Aside

Archived in HTML & CSS, Design & Web

There are 25 responses

External References

Copyright © Mr. Simon Collison 2003-2017. Protected and licensed under a Creative Commons License. Grab the RSS feed

Engineered in Nottingham, scaffolded by ExpressionEngine, steam-pumped by United & kept alive with tea and hugs.