text scroll up under another layer

[fanmulan]

how do i code the look the below link shows:
http://www.csszengarden.com/?cssfile=213/213.css

i.e. a long bar of images stay on top of the text... and when scroll, the text comes up under the long bar of images

1) does this works in all browsers
2) the long bar stays as wide as the user browser at any time

thx for your help in advance... i am a new comer learning hard on css

[chrishirst]

It uses position:fixed with a high z-index

[Chris`]

1.) Yeah.
2.) width: 100%;

[fanmulan]

thanks very much for the reply.

I put that white bar on top of all and at the bottom of the page. It works well in firefox and safari... and I even found the script for ie6 for making the bar staying always at the bottom of the page.

But I when i see the page on iphone...it looks ok when the page first pops up, but when i scroll down , the white bar moves up with other page content...

so , how can i make it work on iphone ?? :S

[Rayzur]

how can i make it work on iphone ??
It does not appear that you will be able to.

A quick google search turns up the problem, iphone position:fixed. (http://www.google.com/search?q=iphone+position%3Afixed&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a)

Fixed Positioning in Mobile Safari (http://www.iphonemicrosites.com/articles/fixed-positioning-in-mobile-safari/)

This renders fixed positioning null and void on iPhone. An element that has its position fixed is affixed to the body, not the viewport. So it is actually working as intended, though most people would prefer it attached to the viewport.”

[fanmulan]

It does not appear that you will be able to.


In that case, what should I code on html to let iphone know i have another css layout for mobile safari??

[Chris`]

Here's an article which should help you: http://minimaldesign.net/articles/read/serving-iphone-specific-css