iPhone Background Issue

On this site (websearchroi.com), when it is viewed on an iPhone, the homepage city background does not appear. See attachment. But when it is viewed on an Android, or in any iPhone user agent or simulator, the city skyline background DOES correctly appear. I do not have an iPhone so I'm unable to reproduce it and troubleshoot.

See screenshot here: http://tinypic.com/r/33peo13/9

The background is simply a css image background:
#intro {background: rgba(0, 0, 0, Innocent url("/wp-content/uploads/site-elements/philadelphia-digital-marketing-mobile.jpg") repeat scroll 0 0;}

test DIV not reorienting properly in Iphone... help!


My test DIV is 90% of screen width. It loads fine in an Android or an IPhone. However when I rotate an IPhone from landscape to portrait it resizes incorrectly. It reorients fine in an Android.

I've been looking at my CSS/HTML for an hour and trying it different ways and still no luck. What the heck?!? Does the IPhone need a special CSS tag to make it rotate properly?

Any help would be greatly appreciated. THANKS!!!

Here is the code

Sticky header problem


I am trying to improve an already working but faulty web app for iPhone.
What there is:

The sticky header

<div style="position: fixed; left: 0px; top: 0px; background-image:url('logo.png'); height:51px; width:100%; z-index: 99;"></div>

The div that is beneath the sticky header when content is more than what fills the screen.

<div class="scroll_area">

The div for the above area:

.scroll_area {
	position:			absolute; 
	left:				0px; 
	top:				50px; 

Horizontal Scrolling/Fixed Width Issue on iPhone

We have been working on a website, www.ched53.co.uk and been trying to solve a browser compatibility issue on the Twenty Eleven theme. On the iPhone and Windows Phone the page appears to be centred and is scrolling behind the right side of the background of what looks like a sidebar? (However there is no sidebar present)

Perhaps this is a fixed with issue requiring @media css... but we're baffled and reaching out for someone's advice who may have dealt with this type of error before.

iOS/Mobile Safari issue (margin?)

I created a simple HTML5 header structure, which contains a paragraph (#logo) and an unordered list (#menu, nested in a nav element).

The header contains more elements, so it has a white background, while the #logo and #menu elements share the same background-color (#369). This works fine in all major browsers (Firefox/IE 8/Chrome/Safari). In Mobile Safari (both iOS 3.2/iPad and iOS 4.1/iPhone), there is a thin line between the #logo and the #menu element, although the margins have been set to 0 for both elements.

Syndicate content