IMG Does Not Align Properly in iPhone

Hi there!

I have a responsive layout that I am designing for a client meant to easily change sizes between tablet and mobile phone screen dimensions. While the content and header itself remains responsive, I have a banner that repeats across the x-axis underneath the centered logo image, which seems to adjust just fine (called out in the CSS background-image element). However, the image, which is called out in the HTML, does not align to the repeating banner as it does in the tablet version, and instead bumps up about ten or so pixels.

Other things to note: This only happens on iPhones and iPods. Shows up great on Android devices no matter what the dimensions.

The HTML code (this is inside a container div):

<div id="logof">
 <img src="images/clientlogo.png" alt=""/>
</div>

And the corresponding CSS for that div:

#logof
{
position:relative;
margin-top:30px;
margin-left:auto;
margin-right:auto;
text-align:center;
width:100%;
height: 117px;
background-image:url(../images/logorepeat.png);
background-position:0px 26px;
background-repeat:repeat-x;
z-index:50;
}

Edited November 7, 201213 yr by mpinsky