CSS elements (with sprites) on iPhone/iPad not scaling correctly

I have a list on my main page which each has a link. Each list item has a different height and width which act like blocks on the page. Inside each list item is a link to another area on my side. Wrapped around this list is a container div, with a header and footer like most sites. The ul also uses a CSS sprite for the images, so that the normal picture is only about half the height of the image, and the bottom are the other image sprites.

For some reason the on an iphone/ipad are not scaling correctly, in fact my seems to repeat the background left to right, and also the height is not maintained, so you can see the other images for the sprite. If I set no-repeat on the background, only half of the container div is filled and there is this big white gap to the right of the splash section, and the bottom area with the other sprites still display.

I have tried changing the width and height of the to be much larger, I've also t开发者_JAVA百科ried to wrap the in a div with the same fixed height and width. I also tried to add the '' tag when iphones/ipads are used. None of which made any difference. It seems like the unordered list just doesn't want to fill out to the container.

<style media="screen">
#main{
 width: 985px;
 height: 1078px;
 background: url(../images/main.jpg);
 margin: 0px; 
 padding: 0;
 position: relative;
}

#main li {
 margin: 0; 
 padding: 0; 
 list-style: none;
}

#mainSection1 a { left: 642px; width: 193px; top: 282px; height: 18px; position: absolute; }
#mainSection1 a:hover { background: url(../images/main.jpg) -642px -1360px; }
/* ... and so forth */
</style>

<ul id="main">
   <li="mainSection1"><a href="anotherpage></a></li>
   <!-- there are 8 other list items here repeating the same -->
</ul>

You can solve the repeating issue by adding no-repeat to your background declarations.

background: url(../images/main.jpg) -642px -1360px no-repeat;