Problem: when you provide a background images (through HTML or CSS) on a table row:

<table>

<tr background="bg.gif">

<td>some stuff</td>

<td>more stuff</td>

<tr>

</table>

On Firefox everything would go out as planned. However in older browsers like IE 6, each of the 2 table columns will inherit the background image and you will get a nasty effect.

Solution: You will need to use background-image:none on every table cell while the row needs a position:relative.

<table>

<tr style="background-image: url(bg.gif);  position: relative;">

<td style="background-image:none;">some stuff </td>

<td style="background-image:none;"> more stuff </td>

</tr>

</table>

Step 1: include prototype.js

Create a new page (index.php). Add this line of code in the tag of index.php to include prototype framework:

<script type="text/javascript" src="prototype.js">
</script>

Step 2: HTML code for index.php

<input type="text" name="name" id="name" />
<input type="submit"  value="Verify" onclick="javascript:verifyName()"/>

<span id="result" style="color:#009900"> </span>

Step 3:Create insert.php

Create a new page (verify.php). This page contains a simple query to verify if record exists in database table (Users):

<?php
if(isset($_GET['name']))
{
/* Connection to Database */
include('config.php');
/* Remove HTML tag to prevent query injection */
$name = strip_tags($_GET['name']);

$sql    =    'SELECT *
FROM Users
WHERE user_name="'.$name.'"';
$result=mysql_query($sql);
if(mysql_num_rows($result)&amp;gt;0)
echo $name.'the username already exists!';
else
echo $name.'the username does not exist!';
}
else
{
echo '0';
}
?>

Step 4: Javascript function to enable Ajax Request

This code enable ajax request with prototype. Add this lines of code in the index.php file:

<script type="text/javascript">

function verifyName()
{
var name = $F('name');
var url = 'verify.php?';
var pars = 'name=' + name;
new Ajax.Request(url, {method: 'get',parameters: pars,onComplete: showResponse});
}

function showResponse(originalRequest)
{
$('result').innerHTML = originalRequest.responseText;
}

</script>

We pass the value we want to search for to index.php  using this simple code:

method: 'get',parameters: pars

onComplete we show in the tag the response text, returned by the Ajax Request method:

if(mysql_num_rows($result)>0)
echo $name.'the username already exists!';
else
echo $name.'the username does not exist!';

The echo function returns the response text which is displayed in the “result” container in index.php, without ever leaving the page.