PRP - artifact #6 - button hover states on touch screens

I encountered this problem previously and had to implement a quick work around that utilised the phone's :active/:hover states.

This time around I have taken the problem more to hand and tried a number of options to achieve fake hover effects.

-----------

The first one used image sprites as made popular by AListApart.

This however failed due to the CSS. Active states were recognised by iPhone and held, whilst Android needed hover but then found that the hover effect was still activated when you returned to that page.

-----------

Another option I tried was to use CSS directly and apply a large, noticeable area which would appear when the user had touched the button.

Again, this was doable on the iPhone but failed on Android.

----------

The last option I considered after reading advice directly from Apple was to use Javascript. A good heads up was actually Jacqui's portfolio site.

I experienced initial problems when trying to get text masked.

This technique is used so that the site will degrade if viewed by browsers that are text only etc and they will see Back rather than the symbol.

At first the image was sitting alongside the text. Eventually I altered the image's css to include text-align = -4000px.

This has proved the most effective method so far. I'm still trying to fine tune the CSS so that the hover problem in Android is curtailed. So far I am having to double up the :active and :hover tag together in the CSS.

@