I have an e-commerce site (openCart) which is delivering content to two separate domains, using different templates and css files. One domain is designed specifically for mobiles. The buttons on the main domain are rendered via background images, those for the mobile domain are just coloured.
All well and good. Everything tests out fine using desktop browsers, iPhone emulators and Opera Mini. So, on the main site the button looks like this:
and on the mobile site it looks like this
But on an iPod - only - OK on other phones, it apparently looks like this:
with the background image from the main site (I think) superimposed on top of the coloured background for the mobile site.
Now, the background image does not appear at all in the css for the mobile site, and I'm at a loss to understand how this is happening. I've tried setting background-image:none in the mobile css, as a catch all - but still no difference.
This is made harder because I don't have access to an iPod to test this....
Anybody got any clues as to why this might be happening?
Main site page
Mobile site page