When tested in iPhone it has a huge gap between

HTML & CSS
1

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;	
}
2

Maybe try adding the width and height to the h1 instead of the image and remove the span (which seems to be unnecessary anyway).

As an aside, it would be good to have some text in there for the h1, even if you move it off screen. Even better would be an image replacement technique.

Otherwise, post a link so we can see this in action.

3

Thanks for that information, ralph. With all the messing around with what was in the header div, I decided to do this:

#header {
	overflow: hidden;
	width: 890px;
	display: block;
	height: 253px;
}

#header img {
	display: block;	
}

That enabled me to get rid of all gaps within the header div.

I did try what you said Ralph, as you said I needed to post a link and then I decided to play around with the header div a bit more and came up with the above result. Thanks anyway Ralph I did learn something from you.

4

No worries. An alternative to display: block on the image would be

#header img {
	vertical-align: bottom;	
}

Without that, there would be a gap below the image.