Database calls and divs - Firefox v IE

PRSWeb

Hi.

I have a database of color swatches, and I want a user to be able to click on the small image and view the large image. I can get it to work in firefox, but not in IE. Can someone look at the code and give me an idea why that might be? The large image (in firefox) displays outside the scrolling box with the small swatches, but in IE... !?!?!?

<head>
<script type="text/javascript" src="scripts/swatches.js"></script>
<script src="includes/popup.js" language="javascript" type="text/javascript"></script>

</head>
<html>

<table border=1 cellspacing=0 cellpadding=0 width=420px>
  <tr><td width="56%" bgcolor="#CCFF99">
  <?php
  include 'db.inc';

  $sql = 'SELECT * FROM `fyswilson_art` WHERE 1 LIMIT 0, 300 ';

  if (!($connection = @ mysql_pconnect(localhost, 
                                    dbo162100635,
                                    XXXXXXXX)))
     showerror();

  if (!mysql_select_db("db162100635", $connection))
     showerror();

  if (!($result = @ mysql_query ($sql, $connection)))
     showerror();
?>
    <div style="HEIGHT: 400px; WIDTH: 100%; OVERFLOW: auto">

<?php

echo "<table><tr>";
	   $i=1;

   while ($row = @ mysql_fetch_array($result) 	)	{	  

			$image = "<img src=\"";
			$directory = "images/standards/";					
			$image_src = "{$row["lam_number"]}";
   			$image_src .= "-";
			$image_src .= "{$row["lam_name"]}";
			$image_src .= "_40.gif\" border=\"0\" alt=\"{$row["lam_name"]}\">";


			echo "<td> <a href=\"#\"><div id=\"a\" onMouseDown=\"show('{$row["id"]}','{$row["lam_name"]}');\">";								
			echo $image;
			echo $directory;
			echo $image_src;		
			echo "</div></a></td> ";			

if($i%4==0)
{
	echo "</tr>";
}
$i++;	




			$lrg_image = "<img src=\"";
			$lrg_directory = "images/standards/";					
			$lrg_image_src = "{$row["lam_number"]}";
   			$lrg_image_src .= "-";
			$lrg_image_src .= "{$row["lam_name"]}";
			$lrg_image_src .= "_150.gif\" border=\"1\" alt=\"{$row["lam_name"]}\">";


			echo "<div class=\"largeImg\" id=\"{$row["id"]}\" style=\"visibility:hidden; position:absolute; top:175; left: 555px; z-index: 0; \">";	
			echo $lrg_image;
			echo $lrg_directory;
			echo $lrg_image_src;		
			echo "<br>{$row["lam_name"]}<br>{$row["lam_number"]}</div>";


};				




echo "</td></tr></table>";
?>

</html>

To see the pages in action, you'll need to go here:

http://furnishyourschool.com/wilsonArt.php

The page is password protected:
l: furnishyourschool
p:fys1234

Thanks for any input.

Paul

esukf

Seems like a Javascript problem.

try correcting document.getElementById(i) to document.getElementById(id) in swatches.js

// JavaScript Document
//toggles layer visibility on and off

function show(id, name) {
	for(i=27; i<275; i++){
	document.getElementById(i).style.visibility = "hidden";    //<---should be (id) instead of (i)
	}
	document.getElementById(id).style.visibility = "visible";// Example:
	document.cookie = name;

// writeCookie("myCookie", "my name", 24);
// Stores the string "my name" in the cookie "myCookie" which expires after 24 hours.
}