iPhone 4 appears with a gap and extra padding, which shouldn't be there

HTML & CSS
1

I have been testing my client’s website in iPhone 4/Mobile Safari 4.0.5, and the result was a gap between #mainMenu, #slider and #welcome within #mainWrapper. Every other browser looks like this doesn’t appear. Also between #footer and #bottom (it is where #pageWrapper ends), there is extra padding, which shouldn’t be there. Here is the website: http://gwydircarapark.com.au/website/. Can someone please help me solve this? Thanks in advance.

2

Please someone, I am at a desperate point now, this the only thing I need to do and then I can hand it over to the client.

3

Well for a faster way of solving these problems, I have decided to add my css, html and an image of the problem here. The image is here: http://i53.tinypic.com/rvd8j5.jpg.

Here is my css:


html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

body {
	text-align:center; /* center #pageWrapper IE 5.x */
	font:normal 80%/140% Arial, Helvetica, sans-serif;
	color: #000;
	background: #032539;
}

#pageWrapper {
	width:850px;
	margin:0 auto;
	text-align:left;
	overflow:hidden;
	background: #FFF;
	margin-bottom: 0;
}

/* the first problem */

#mainWrapper {	
	overflow: hidden;
	display: block;
	width: 850px;
	height: 432px;
	margin-bottom: 1em;
}

#mainWrapper img {
	display: block;
	vertical-align: top;
}

#mainMenu {
	list-style: none;
	background: url('images/navbar.gif') no-repeat;
	width: 850px;
	padding: 10px;
}

#mainMenu li {
	display: inline;
}

#mainMenu a, #mainMenu a:visited {
	color: #FFF;
	text-decoration: none;
	margin-left: 20px;	
}

#mainMenu a:hover {
	color: #FFF;
	text-decoration: underline;
	margin-left: 20px;	
}

#slider {
	float: left;
	width: 558px;
	background: #719fba;
}

#welcome {
	float: right;
	width: 292px;
	color: #FFF;
	background: #265B8E;
	padding-top: 25px;
	line-height: 27px;
	margin-bottom: 1em;
	vertical-align: top;
}

#welcome p {
	margin-bottom: 1em;
	padding-left: 12px;
	margin-top: 16px;
	font-size: 14px;
	margin-right: 6px;
}

/* the second problem */

#footer {
	background: url('images/footerbg.gif') no-repeat;
	padding: 10px;
	text-align: center;
	width: 100%;
}

#bottomMenu {
	list-style: none;
}

#bottomMenu li {
	display: inline;
}

#bottomMenu a {
	color: #2B6394;
	margin-left: 20px;
	text-decoration: none;	
}

#bottomMenu a:visited {
	color: #719FBA;
	margin-left: 20px;
	text-decoration: none;
}

#bottomMenu a:hover {
	text-decoration: underline;
	margin-left: 20px;
	color: #2B6394;
}

#bottom {
	margin-top: 10px;	
}

#bottom p {
	margin-bottom: 1em;
	color: #FFF;
}

#bottom a {
	color: #FFF;
	text-decoration: none;
}

#bottom a:visited {
	text-decoration: none;
	color: #CCC;
}

#bottom a:hover {
	text-decoration: underline;
}

Here is my html.

The first problem:


<div id=pageWrapper">
<div id="mainWrapper">
	<ul id="mainMenu">
		<?php wp_page_menu('exclude=7'); ?>
	</ul>

<div id="slider">
	<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
</div>

<div id="welcome">
	<h1>Welcome</h1>
	<?php
  	$home_page_post_id = 7;
  	$home_page_post = get_post( $home_page_post_id, ARRAY_A );
  	$content_home = $home_page_post['post_content'];
  	echo $content_home;
	?>
</div>
</div>

The second problem:

<div id="footer">
		<ul id="bottomMenu">
			<?php wp_page_menu('exclude=7'); ?>
		</ul>
	</div>
</div>

<div id="bottom">
	<p>Copyright Gwydir Carapark &amp; Thermal Pools. All rights reserved.</p>
</div>
4

Hi,

Try this:


#footer,#mainMenu{-webkit-background-size:100%;}

The iphone has trouble with repeating background images when it scales to fit.

5

Thanks for that Paul. That fixed it.