Fixing absolute positiong in Andriod
===

I have my website and it looks great everywhere however I'm not a professional coder for Android. I do not know the extra quirks it has and I'm not sure hoe much I really need to know. Is there a way to single it out like in conditional comments for IE? 

[Here is my website][1] and the banner and logo appear off to the left hand side of the screen. I have a Samsung Galaxy 3 and this is what my banner looks like on it.

![enter image description here][2]

Now I realize why this is happening, it's because they are both absolutely positioned and obviously the `margin-left` is making it go off screen. However I can't change that without destroying the layout for all the regular desktop browsers. 

        #site-title { background: url(img/heavensgate-logo.jpg) no-repeat; width: 229px;height: 297px; position: absolute; top: 0px; left: 50%; margin-left: -438px; z-index: 2; border: 0px; text-indent: -9999px; }
    
    #banner { position: absolute; top: 165px; width:868px; left: 50%; margin-left: -448px; z-index: 1; padding: 15px; background-color:
    #fff; border: 1px solid #b4b4b4; }
    
    
    
    <h1 id="site-title"><span><a href="http://heavensgatewinery.ca/" title="Heavens Gate Winery" rel="home">Heavens Gate Winery</a></span></h1>
        
        <div id="banner">
        <img src="http://heavensgatewinery.ca/wp-content/uploads/banner8.jpg" style="position: absolute; visibility: hidden; top: 0px; left: 0px; border: 0px none;">
        </div>

I'm confused as to how I should work with getting the banner and logo to work with Android. Any help is appreciated. 


  [1]: http://heavensgatewinery.ca
  [2]: http://i.stack.imgur.com/1Yhiv.png