When tested in iPhone it has a huge gap between...

[!designer!]

When I tested my client's website in all major browsers it was all right apart from the iPhone 4/4.1, Mobile Safari 4.0.5. In the iPhone, it has a huge gap between mainMenu and h1 span. Can someone please help me solve this problem? Thanks in advance.

Here is my html:

<div id="header">
		<ul id="mainMenu">
			<li><a href="#">Home</a></li>
			<li><a href="#">Head Stewards</a></li>
			<li><a href="#">Horse Section Rules &amp; Regulations</a></li>
			<li><a href="#">Entertainment</a></li>
			<li><a href="#">Membership</a></li>
			<li><a href="#">Trade Space</a></li>
			<li><a href="#">Sponsorship</a></li>
		</ul>
		
		<h1>
			<span><img alt="header" height="189" src="images/header.jpg" width="887" /></span>
		</h1>
</div>

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  {
	font: normal 80%/140% Verdana, Arial, Helvetica, sans-serif;
	text-align: center; /* center #pageWrapper IE 5.x */
	color: #000;
	background: #9B9980 url('images/bg.gif') repeat-x;
}

#header {
	overflow: hidden;
	width: 100%;
	display: block;	
}

#mainMenu {
	background: url('images/mainnavbg.gif') no-repeat;
	width: 890px;
	list-style: none;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 12px;
}

h1 span {
	display: block;
	width:887px;
	height:189px;	
}

#mainMenu li {
	display: inline;
}

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

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