Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts

    AJAX results display issues with Internet Explorer

    Hello,

    I have a PHP page on which I query a MySql database and display the results in an HTML table.

    PHP code works fine, AJAX code works fine, everything looks fine except that the display of the table is different between IExplorer and Firefox. See the below image. The table is perfect with Firefox but there is a 1px white line displayed with IExplorer in each row.

    Now maybe this should be posted in the HTML section. I don't know. But the same table design, not being output by AJAX displays fine with both IE and Firefox.



    PHP code that displays the HTML table:

    PHP Code:
    $hint .= <<<HEREDOC
    <tr><td align="center" valign="middle" width="3%" class="$class"><img border="0" src="../images/graph.jpg"></img></td>
    <td valign="middle" width="20%" class="$class"><p class="medium">$a
    [$i]</p></td>
    <td valign="middle" width="13%" class="$class"><p class="medium">$b
    [$i]</p></td>
    <td valign="middle" width="10%" class="$class"><p class="medium">$c
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$d
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$e
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$p
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$f
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$g
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$h
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$j
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$k
    [$i]</p></td>
    <td valign="middle" width="6%" class="$classx" style="padding: 0px;"><p class="medium"><input class="button_buy" type="submit" value="> > >" name="submit"></p></td><tr>
    HEREDOC; 
    CSS classes used in the table: selectbox-xxx and selectbox-blu-xxx are $class and $classx in the above code.
    Code:
    .selectbox-top {
    border-width: 0px 0px 1px 1px; border-color: #777; border-style: solid; padding-left: 2px;
    }
    .selectbox-btm {
    border-width: 0px 0px 0px 1px; border-color: #777; border-style: solid; padding-left: 2px;
    }
    .selectbox-blu-top {
    border-width: 0px 0px 1px 1px; border-color: #777; border-style: solid; padding-left: 2px; background-color: #c3d8f8;
    }
    .selectbox-blu-btm {
    border-width: 0px 0px 0px 1px; border-color: #777; border-style: solid; padding-left: 2px; background-color: #c3d8f8;
    }
    
    a.blue:link { text-decoration: underline; color: #0000FF; text-align: center; font-size: 11px;}
    a.blue:visited { text-decoration: underline; color: #0000FF; text-align: center; font-size: 11px;}
    a.blue:hover { text-decoration: underline; color: #FF0000; text-align: center; font-size: 11px;}
    
    p.medium { font-size: 11px; text-align: justify; }
    
    .button_buy { background-color: #a8efb9; height: 18px; width: 100%; font-size: 11px; outline: none; border: 0px; font-family: Trebuchet MS, Arial; }
    Any help to fix this will be much appreciated!

    Thanks,
    Arnaud
    Last edited by Arnaud; 07-16-2009 at 11:11 AM. Reason: typo
    Chuck Norris counted to infinity.
    Twice.

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    How are you adding the new rows to the table. Have you compared the generated PHP source to what is there by default?

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    Hello.

    Thank you for your post. Not sure I fully understand your question but...

    I am adding the new rows by a simple MySql query.

    Basically, on the page, I have two parts. The top half of the page displays a scroll list of all players available (but that can be more than 300) so I did the bottom part with an AJAX search box that display players when you are typing a name in. Below is the full page code.

    The interesting point is that everything works like I want, and the display under FF is perfect but... only quite perfect with IE.

    You will notice with the code below that I am also adding a scroll to the table if there are more than 12 results to show and I am blocking the width/height of the whole thing so that it looks nice. These values are calculated differently if the browser is IE or FF.

    PHP Code:
    <?
    header
    ("Cache-Control: no-cache, must-revalidate");
    //Date in the past
    header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
    //Get PHP header as usual (nothing related to the above)
    require("header.php");

    //function to remove accented chars for AJAX
    function removeaccents($string) {
      return 
    strtr($string,
      
    "",
      
    "SOZsozYYuAAAAAAACEEEEIIIIDNOOOOOOUUUUYsaaaaaaaceeeeiiiionoooooouuuuyy");
    }

    $class="selectbox";

    $sql "select * from LNA_PLAYERS where STATUS!='OUT'";
    $sql .= " and ROLE='".$_SESSION['SEND_ROLE']."'";
    $sql .= " and PRIX<='".$_SESSION['SEND_PRICE']."' order by NAME asc";
    $req mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
    $rows mysql_num_rows($req);
    $i=0;
    $lc=0;
    while (
    $i $rows) {
        
        
    $data mysql_fetch_array($req);
        
    $a[] = removeaccents($data['NAME']);
        
    $b[] = removeaccents($data['SNAME']);
        
    $c[] = $data['CLUB'];
        
    $d[] = $data['ROLE'];
        
    $e[] = $data['PAYS'];
        
    $f[] = $data['GOAL'];
        
    $g[] = $data['ASSIST'];
        
    $h[] = $data['PENALTY'];
        
    $j[] = $data['BONUS'];
        
    $k[] = $data['TOTAL'];
        
    $id[] = $data['ID_LNA_PLAYERS'];
        
    $p[] = $data['PRIX'];
        
    $i++;
    }

    //get the q parameter from URL
    $q=$_GET["q"];

    //lookup all hints from array if length of q>0
    if (strlen($q) > 0)
    {
      
    $hint="";
      for(
    $i=0$i<count($a); $i++)
      {
      if (
    strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
        {
        if (
    $hint=="")
          {
    //increment to count rows
    $lc++;

    //change the class if first row or not
            
    if ($e[$i] != "SUI") {
                
    $pclass "selectbox-blu";
            } else {
                
    $pclass "selectbox";
            }

            if (
    $i == ($lc-1)) {
                
    $class $pclass "-btm";
                
    $classx $pclass "-btm-btn";
            } else {
                
    $class $pclass "-top";
                
    $classx $pclass "-top-btn";
            }


    $hint = <<<HEREDOC
    <tr><td align="center" valign="middle" width="3%" class="$class"><img border="0" src="../images/graph.jpg"></img></td>
    <td valign="middle" width="20%" class="$class"><p class="medium">$a
    [$i]</p></td>
    <td valign="middle" width="13%" class="$class"><p class="medium">$b
    [$i]</p></td>
    <td valign="middle" width="10%" class="$class"><p class="medium">$c
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$d
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$e
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$p
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$f
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$g
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$h
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$j
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$k
    [$i]</p></td>
    <td valign="middle" width="6%" class="$classx" style="padding: 0px;"><p class="medium"><input class="button_buy" type="submit" value="> > >" name="submit"></p></td><tr>
    HEREDOC;


          }
        else
          {
    //increment to count rows
    $lc++;

    //change the class if first row or not
            
    if ($e[$i] != "SUI") {
                
    $pclass "selectbox-blu";
            } else {
                
    $pclass "selectbox";
            }

            if (
    $i == ($lc-1)) {
                
    $class $pclass "-btm";
                
    $classx $pclass "-btm-btn";
            } else {
                
    $class $pclass "-top";
                
    $classx $pclass "-top-btn";
            }


    $hint .= <<<HEREDOC
    <tr><td align="center" valign="middle" width="3%" class="$class"><img border="0" src="../images/graph.jpg"></img></td>
    <td valign="middle" width="20%" class="$class"><p class="medium">$a
    [$i]</p></td>
    <td valign="middle" width="13%" class="$class"><p class="medium">$b
    [$i]</p></td>
    <td valign="middle" width="10%" class="$class"><p class="medium">$c
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$d
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$e
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$p
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$f
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$g
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$h
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$j
    [$i]</p></td>
    <td valign="middle" width="6%" class="$class"><p class="medium">$k
    [$i]</p></td>
    <td valign="middle" width="6%" class="$classx" style="padding: 0px;"><p class="medium"><input class="button_buy" type="submit" value="> > >" name="submit"></p></td><tr>
    HEREDOC;
          }
        }
      }
    }

    //define height/width and scroll (if >=12 rows) for IE and FF browsers
            
    if ($lc 12) {

                if (
    $userBrowser == "IE") {
                    
    $heightclass = ($lc 20);
                } else {
            
    //this is only to avoid a double border issue with FF
                    
    $heightclass = (($lc 20) -1);
                }

                
    $widthclass 684;
                
    $overflowclass "hidden";

            } else {

                if (
    $userBrowser == "IE") {
                    
    $heightclass 229;
                } else {
                    
    $heightclass 225;
                }
                
    $widthclass 700;
                
    $overflowclass "auto";
            }


    // Set output to "no suggestion" if no hint were found
    // or to the correct values
    if ($hint == "")
    {
    $response="<p class='hajax'>No suggestion</p>";
    }
    else
    {
    $response=$hint;
    }
    $head "<div style='height:".$heightclass."px; width:".$widthclass."px; overflow:".$overflowclass.";' class='scroll'><table width='100%' cellpadding='0' cellspacing='0'>";
    $queue "</table></div>";
    //output the response
    $ajaxit $head.$response.$queue;
    echo 
    $ajaxit;
    ?>
    Chuck Norris counted to infinity.
    Twice.

  • #4
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    I am going to give up on that one unless someone has a bright idea...

    Why is that stupid IExplorer not able to read and display correctly valid HTML
    Chuck Norris counted to infinity.
    Twice.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •