CSS Z-Index OVER Javascript "Survey Monkey" PNG Fade at bottom of Scroll Bar

Looking to add a PNG Fade at the bottom of the our survey questionnaire box. The short questions won't show them, but for the longer ones with a vertical scroll I would like to add a slight fade at the bottom to help indicate there is more below. The scroll bar should be enough to notify people, but some people need a little more, plus its what "we" (my boss and I) want.

Here is the page I am working on: http://www.careersinmusic.com/template.aspx开发者_运维知识库

Click the "Click Me for Survey" Link to Load the Survey.

QUESTION #3 is longer and uses a scroll. Click Yes for question #1 and #2 to get to the Long question #3.

Any help is always greatly appreciated, Hopefully this is enough info.

• First, give your #PageContentDiv a position style (probably relative).
• Then, include the PNG fade image in that div, also with a position (probably absolute)
• Give z-index:1 to the #PageContentDiv, z=index:2 to the fader image
• Set display:none on that fader image
• Javascript: Test if #PageContentDiv has been scrolled (.scrollTop==0)
• Javascript: Show the fader (.style.display='') if scroll bar is still at 0

Key parts to remember are that elements need a position style to have a z-index applied, and that you'll need to remove the fader once the user has realized the box can be scrolled.