Hi,

I have one issue in image display on device , it is working fine on simulator. when apps load , two small images are displayed,and i put the onclick event on two images. when click on the first images (GoAir.png),then load a Version.png (alignment is correct), But when i click on the second img(AIRINDIA.png) , the alignment of img (Version.png) extended to the right side.So alignment is not corrected .

Please see my web apps link :URL: http://goo.gl/zRtLH&type=webapp1_0

Js code is:

function init()
{
// Add your code steps here
document.getElementById('imgid1').style.display = "block";
document.getElementById('imgid2').style.display = "block";
document.getElementById('loadimg1').style.display = "none";

var img1="<table width='240' cellpadding='4' cellspacing='2'><tr><td><img src='GoAir.png' onclick='javascript:loadimg();'></td></tr></table>";
var img2="<table width='240' cellpadding='4' cellspacing='2'><tr><td><img src='AIRINDIA.png' onclick='javascript:loadimg();'></td></tr></table>";
mwl.insertHTML('#imgid1',img1);
mwl.insertHTML('#imgid2',img2);

}
function loadimg()
{
document.getElementById('imgid1').style.display = "none";
document.getElementById('imgid2').style.display = "none";
document.getElementById('loadimg1').style.display = "block";
var loadimg="<div id='tablebox'><table width='240' cellpadding='4' cellspacing='2'><tr><td><img src='Version.png' onclick='javascript:init();'></td></tr></table></div>";
mwl.insertHTML('#loadimg1',loadimg);
}


index.html

<body onload="javascript:init();">
<div id='imgid1'></div>
<div id='imgid2'></div>
<div id="loadimg1"></div>
</body>

basic.css is

#tablebox
{
margin-left:5px;
margin-top:20px;
}


Regards,
Greenbil