Functionality different on IE than on Samsung Galaxy Tab

Question

I have a PHP based application that I need to work on both a normal PC and on a Samsung Galaxy tablet.

The functionality on both devices works correctly however it is just the formatting and presentation of the data that is diffrent.

My Application pulls data from a mysql database when the user enters a product number. this data is displayed in the same row as the product code inserted by the user. in Internet explorer it works 100% however on the tablet, once the user inputs a user code, the entire row is condensed into the first cell.

I have attached images to try get across what the issue is, please find these at bottom of qustion.

My relevent code is:

In Header:

<script type="text/javascript"> 
  function showUser(userNumber, str) 
  { 
  document.getElementById("r"+(userNumber+1)).style.display="block";  
    if (str=="") 
    { 
      document.getElementById("txtHint" + userNumber).innerHTML=""; 
      return; 
    }   
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    {// code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xmlhttp.onreadystatechange=function() 
    { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
        document.getElementById("txtHint" + userNumber).innerHTML=xmlhttp.responseText; 
      } 
    } 
    xmlhttp.open("GET","getdata1.php?q="+str,true); 
    xmlhttp.send(); 
  } 
</script> 

In Body:

<table><tr id="r1">  
    <td>
<input size=8 style="border: none"  type=number id=sku1 name=sku1 onchange="showUser(1, this.value)" onkeypress="return enter(document.orderform.sku2)" value=<? echo $sku1; ?>  >
    </td>
    <td>
        <? if($grp1==0){echo "&nbsp; ".$grp1;} else {echo "&nbsp; " ;} ?>
    </td>
    <td>
        <? if($su1==0){echo "&nbsp; ".$su1;} else {echo "&nbsp; " ;} ?>
    </td>
    <td>
        <? if($fp1>0){echo "&nbsp; ".$fp1;} else {echo "&nbsp; " ;} ?>
    </td>
    <td>
        <input type=number id=qty1 name=qty1 size=3 value=<? if($qty1>0){echo $qty1;}; ?> >
    </td>
    <td>
        <? if($qty1==0){echo "&nbsp;";} else {if($qty1>0){if($line1decvalue==0){ echo "<img src=tick.jpg>";} else{ echo "<img src=cross.jpg>";}} else {echo "<img src=cross.jpg>";}} ?>
    </td>
    <td>
        <b><font color=red><? if($sku1>0){if($points1>0){echo "&nbsp; ".$points1;} else {echo "0";};} else {echo " &nbsp; ";} ?></font></b>
    </td>
    <td>
        <div align="left" id="txtHint1"><? if($sku1>0){echo "Selling Units: <font color=red>$su1</font>, Grouping: <font color=red>$grp1</font>, $su1 per Pallet: <font color=red>$fp1</font>";} else {echo "Select a SKU on left and Details will be seen here";} ?></div>
    </td>
</tr>
<tr id="r2">  
    <td>
<input size=8  style="border: none" type=number id=sku2 name=sku2 onchange="showUser(2, this.value)" onkeypress="return enter(document.orderform.sku3)" value=<? echo $sku2; ?>   >
    </td>
    <td>
        <? if($grp2==0){echo "&nbsp; ".$grp2;} else {echo "&nbsp; " ;} ?>
    </td>
    <td>
        <? if($su2==0){echo "&nbsp; ".$su2;} else {echo "&nbsp; " ;} ?>
    </td>
    <td>
        <? if($fp2>0){echo "&nbsp; ".$fp2;} else {echo "&nbsp; " ;} ?>
    </td>
    <td>
        <input type=number id=qty2 name=qty2 size=3 value=<? if($qty2>0){echo $qty2;}; ?> >
    </td>
    <td>
        <? if($qty2==0){echo "&nbsp;";} else {if($qty2>0){if($line2decvalue==0){ echo "<img src=tick.jpg>";} else{ echo "<img src=cross.jpg>";}} else {echo "<img src=cross.jpg>";}} ?>
    </td>
    <td>
        <b><font color=red><? if($sku2>0){if($points2>0){echo "&nbsp; ".$points2;} else {echo "0";};} else {echo " &nbsp; ";} ?></font></b>
    </td>
    <td>
        <div align="left" id="txtHint2"><? if($sku2>0){echo "Selling Units: <font color=red>$su2</font>, Grouping: <font color=red>$grp2</font>, $su1 per Pallet: <font color=red>$fp2</font>";} else {echo " &nbsp; "; }?></div>
    </td>
</tr>

PC Functionality:

Tablet Functionality:

Please let me know if I can assist further with any other information.

Answer 1

here is the answer, the line document.getElementById("r"+(userNumber)).style.display="block"; just needs to be removed. Thanks to @Alex van Oostenrijk for this.

Regards, Ryan

Answer 2

I faced a similar issue in one application, I see similar issue here... I had elementid.readystate Which I replaced with jquery ready and it worked for me

Instead of testing in the tablet every time ,test this in chrome ... Saves time both render the same way for these kind of issues