Geek asks and answers

Fix absolute positioning in Android

I have my website and it looks great everywhere, but I'm not a professional encoder for Android. I don't know the extra quirks that I have, and I'm not sure I really want to know. Is there a way to highlight it, as in conditional comments for IE?

Here is my site , and the banner and logo appear on the left side of the screen. I have a Samsung Galaxy 3, and this is where my banner looks.

enter image description here

Now I understand why this is happening, because they are both absolutely positioned, and, obviously, margin-leftmakes him leave the screen. However, I cannot change this without ruining the layout for all 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 am confused by the way I need to work with the banner and logo for working with Android. Any help is appreciated.

+5
3

, , Android , ; DIVs . Paweł Komarnicki -webkit-backface-visibility: hidden:

<div style="position: relative">
    <div style="position: absolute; -webkit-backface-visibility: hidden">
    </div>
</div>
+7

, .

<div style="position:relative;"><div style="position:absolute;"></div></div>
+7

Android (Samsung), , : px (), : in% 0. , ,   left: 10px;   : 20%; 0, calc() :, .

So, I think% does not work for left: in Android. So I thought that the above problem remained: 50% was a problem, I am interested that it was solved with relative relative / absolute. I did the same, but without a solution! There is no difference when using -webkit-backface-visibility!

Solution: instead of left: 17%, use left: calc (17%), and the rest fixed px for left: are accepted, but% does not work !!!

0
source

More articles:


All Articles