Mysterious horizontal lines on my site when rendered on iPad

Question

The following site:

http://staging.jungledragon.com

Has a few rendering issues on the iPad using Safari, so I\'m trying to fix them. There is one issue where I a

Answer 1

The background image I was using stops mid way through the content div and then the background of the container element is supposed to display.

Because the iPad zooms into the outermost div, the relevant background applied to the html tag isn't displayed. It seems that iPad doesn't like it when a fallback background color is not defined, so I had to add some iPad-specific CSS using a media query:

html { background:#ffffff url("images/bg-html.png") center top repeat-x; }
html#inside-html { background:#ffffff url("images/inside-bg-html.png") center top repeat-x; }

body { 
    background:transparent url("images/bg-body.jpg") center top no-repeat;
    text-align:center; 
    font:12px Helvetica, Arial, Verdana, sans-serif;
    line-height: 20px;
    color:#000;
    min-width: 980px;
}

body#inside { background: transparent url("images/inside-bg-body.jpg") center top no-repeat; }

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    body {
        background: #fff url("images/bg-body.jpg") center top no-repeat;
    }

    body#inside {
        background: #fff url("images/inside-bg-body.jpg") center top no-repeat;
    }
}