Page overlap in android app using phonegap

Question

In my app's main page (Messages) there are two buttons (Edit and Settings), on click of each navigates to a separate page.

problem : Everything is working just fine on emulator but there is an overlap (all three pages are getting overlapped ) on a real android device.

I dont have any idea where the problem might be as it is working properly on emulator.

Below is my phonegap code :

function home() {

            document.removeEventListener("backbutton", handleBackButton, false);
            document.addEventListener("backbutton", handleBackButtonOnHome, false);

            //Start Refresh
            gAppControl.refresh = true;

            onDeviceReady();

            //Tool Bars
            document.getElementById("toolHome").style.display = 'block';
            document.getElementById("toolEdit").style.display = 'none';
            document.getElementById("toolMessage").style.display = 'none';
            document.getElementById("toolSetting").style.display = 'none';
            document.getElementById("bottomButtons").style.display = 'none';

            //New changes by romit
            document.getElementById('delete_a').onclick='';
            document.getElementById('delete_a').classList.add('whiteButton');
            document.getElementById('delete_a').classList.remove('redButton');

            //Messages
            document.getElementById("home").style.display = 'block';
            document.getElementById("edit").style.display = 'none';
            document.getElementById("setting").style.display = 'none';
            for (i=0;i<gAppControl.messageCount;i++) 
            document.getElementById("details"+i).style.display = 'none';
        }




function edit() {

            document.removeEventListener("backbutton", handleBackButtonOnHome, false);
            document.addEventListener("backbutton", handleBackButton, false);

            //Stop Refresh
            gAppControl.refresh = false;

            //Tool Bars
            document.getElementById("toolEdit").style.display = 'block';
            document.getElementById("bottomButtons").style.display = 'block';
            document.getElementById("toolHome").style.display = 'none';
            document.getElementById("toolMessage").style.display = 'none';

            //Messages
            document.getElementById("home").style.display = 'none';
            document.getElementById("edit").style.display = 'block';
            for (i=0;i<gAppControl.messageCount;i++) 
            document.getElementById("details"+i).style.display = 'none';
        }




function setting() {

            document.removeEventListener("backbutton", handleBackButtonOnHome, false);
            document.addEventListener("backbutton", handleBackButton, false);

            //Stop Refresh
            gAppControl.refresh = false;

            //Tool Bars
            document.getElementById("toolSetting").style.display = 'block';
            document.getElementById("toolEdit").style.display = 'none';
            document.getElementById("toolHome").style.display = 'none';
            document.getElementById("toolMessage").style.display = 'none';


            //Messages
            document.getElementById("setting").style.display = 'block';
            document.getElementById("home").style.display = 'none';
            document.getElementById("edit").style.display = 'none';
            for (i=0;i<gAppControl.messageCount;i++) 
            document.getElementById("details"+i).style.display = 'none';

            getSettings();

        }

Here is my css :

.button2 {
    position: absolute;
    overflow: hidden;
    top: 8px;
    left: 6px;
    margin: 0;
    border-width: 0 5px;
    padding: 0 3px;
    width: auto;
    height: 30px;
    line-height: 30px;
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
    text-overflow: ellipsis;
    text-decoration: none;
    white-space: nowrap;
    background: none;
}

.blueButton {
    border-width: 0 5px;
}

.button {
    -webkit-border-image: url(toolButton.png) 0 5 0 5;
    -moz-border-image: url(toolButton.png) 0 5 0 5;
}

.blueButton {
    -webkit-border-image: url(blueButton.png) 0 5 0 5;
    -moz-border-image: url(blueButton.png) 0 5 0 5;
}

Thanks in advance. Nanashi