Help me sort out mobile stylesheet snags?

Mobile
1

Hi,
I’m at work, doing my first mobile stylesheet for this site
Homeland Biogas Energy

I’ve asked other staff to please check for me and am using some of the emulators, including this one: iBBDemo2 - Cross Platform iPad and iPhone Simulator
for the iPhone.

I am using two mobile stylesheets, as described on Tutorial: optimizing your website for mobile devices - Element Fusion

one for 319px and less, and the other for iPhone etc 320 to 480 px wide.

iPhone4 sees the regular site, does not pick up on the mobile stylesheet.

iPhone3 and above iPhone emulator see only the header and footer, not the content or sidebar. It is accessing the main site, not the mobile iPhone stylesheet.

htcDroid sees nothing. My own Samsung Reality applies the mobile stylesheet and displays simplified site without issue (except it scrolls in “jumps”).

my Question:
What could be making the iPhone3 stop displaying at the header, or actually it is at the end of the header, just before the main menu? it’s a more advanced phone, I would expect it to do better than my Reality not less… I’m at a loss. :eyes:

I would assume that whatever the answer is to this question would help the Droid also…

This is a WordPress site. I am using WP menu for the main menu. The home page is XHTML error free.

Thanks for any help you might have.

2

I figured it out for the iPhone.

it was “overflow:hidden” which I had applied to wrapper divs to encompass floated elements inside them.

When I changed these to “float:left” and added a width! the site now displays normally.

Not sure yet about the htc Droid.

3

Looks ok on an htc desire

4

Thanks, EastCoast. A friend is reporting on htc droid, also. Looks like removing overflow:hidden is the magic trick.