Alignment Issues in html plus css for android devices

Question

I have some issues that look difficult to solve them by myself as I'm a newbie. I creating app on phonegap and working on screens. In Portrait screen the alignment is different but in landscap it looks diferent. When I solve this problem for one screen, second's alignment get disturbed. Here is the code:

HTML

<header>
    <img class="app_icon" src="img/app_icon.jpg" />
    <p class="appName">Quran-Player</p>
</header>

<section>
    <input type="text" name="search" placeholder="Search"
        autocomplete="on" class="searchField" />

    <hr>

    <p class="advertisement">Advertisement</p>
    <hr>

    <p class="recitersList">Reciters List</p>

    <ul id="bottomTabs">
        <li><a href="player_screen.html" class="left_tab"><b>Player</b></a></li>
        <li><a href="#" class="right_tab"><b>Reciters</b></a></li>
    </ul>

</section>

CSS

body {
    width: 100%;
    height: 100%;
    background-color: #336666;
}

header {
    width: 100%;
    height: 8%;
    top: 0;
    left: 0;
    background: #222;
    position: fixed;
    display: inline-block;
    border-bottom: 4px solid #000000;
    z-index: 100;
}

img.app_icon {
    float: left;
    width: 10%;
    height: 95%;
    padding: 2px 2px 2px 2px;
    align: center;
    display: block;
    margin: 0px 10px 0px 0px;
}

p.appName {
    float: left;
    vertical-align: center;
    color: #ffffff;
    margin-bottom: 3px;
    font-size: 18px;
    font-family: verdana;
}

section {
    position: relative;
    width: 100% ;
    height: 91% ;
    margin-top: 15%;
}

input.searchField {
    width: 99%;
    height: 5%;
    align: center;
    text-align: center;
    text-color: #000000;
    background-color: #ffffff;
    border: solid 2px pink;
    border-radius: 10px;
}

ul {
    margin: 0;
    bottom: 0;
    left: 0;
    padding: 0;
}

li {
    list-style-type: none;
    bottom: 0;
    left: 0;
}

#bottomTabs {
    width: 100%;
    bottom: 0px;
    display: table;
    position: fixed;
    table-layout: fixed;
    text-align: center;
}

#bottomTabs li {
    width: 46%;
    height: auto;
    align: center;
    display: table-cell;
    vertical-align: bottom;
}

#bottomTabs a {
    display: block;
    color: #ffffff;
    min-height: 100%;
    padding: 9px 9px;
    background-color: #222;
    border-radius: 0 0 0 0;
}

a.left_tab {
    margin-right: 3%;
    margin-left: 1%;
}

a.right_tab {
    margin-left: 3%;
    margin-right: 1%;
}

1. I want to set the search-bar right below to the header
2. Here is another issue that can be observed in 3rd screen. I also have to resolve it. thanks,

Answer 1

the problem is here

section {
    position: relative;
    width: 100% ;
    height: 91% ;
    **margin-top: 15%;**
}

for the position from the top (because 15% in landscape mode looks not the same like in portrait)

you can solve it with with jquery like this (untested)

$('section').css("margin-top",$('header').height());

with javascript it should look like this

document.getElementByTagName('section')[0].style.height 
     = document.getElementByTagName('header')[0].offsetHeight;

the other way is to set the height of the header in the css file in px (you can switch the values with eg a media query). and the set the margin-top to the same value plus 2-3px to get the spacing you prefer.

header {
    width: 100%;
    **height: 8%;**
    top: 0;
    left: 0;
    background: #222;
    position: fixed;
    display: inline-block;
    border-bottom: 4px solid #000000;
    z-index: 100;
}

the behavior of the third image is not traceable for me atm.. maybe you have to drop more code..