I have a problem I just can't seem to fix. Please view the following link in firefox and IE to see the issue:
http://www.thecountrystudio.com/home...1&gallery007=1
All the gallery thumbnails in IE are overlayed on one another instead of next to one another like in Firefox.
CSS:
/* gallery pages */
#gallery_Select { font-family: Helvetica, sans-serif; font-size:0.7em; text-align:justify; height:345px; width:132px; margin-top:11px; background-color:#000; overflow:hidden; }
#gallery_Select img {border:none; margin:0; padding:0;}
#gallery_select hr {color:#FFF; width:120px; height:1px; text-align:center;}
.galleryPhotos { overflow: hidden; border: none; height:443px; width: 800px; padding: 0 0 0 75px;}
.galleryPhotos div img { border: 1px solid #888; margin: 11px 8px 0 0; float: left; }
#wn { float:right; position:relative; width:390px; height:68px; overflow:hidden; margin:0; padding:0; }
#wn img { margin:0; padding:0; height:64px; border:none;}
#scrollLinks { margin: 10px 140px 0 0;}
#scrollLinks img { border:none; margin:0; padding:0;}
#scrollLinks a { float:right; position:relative; }
.galleryThumbs td { -moz-opacity:.5; filter:alpha(opacity=50); opacity:0.5;}
.galleryThumbs td:hover { opacity:1.0; }
.galleryThumbs td { padding:0px; margin:0px;}
#galleryHeads {margin-left:20px; width:175px;}
#galleryList {padding:20px; height:250px;}
#galleryList a {line-height:30px; text-decoration:none; color:#FFF; display:block; width:100px;}
#galleryList a:hover { color:#FC9; display:block; width:100px;}
#downloadBroch {padding:0 20px 0 20px; background-image:url(../images/galleries/pdf_BG.jpg); background-repeat:no-repeat; height:40px; }
#downloadBroch a {text-decoration:none; color:#FFF; display:block; width:100px; line-height:40px;}
#downloadBroch a:hover { color:#FC9; display:block; width:100px;}
HTML/PHP:
<div id="wn">
<div id="lyr1">
<table id="t1" border="0" cellpadding="0" cellspacing="0" ><tr class="galleryThumbs">
<?php
$i = $numPhotos;
for ( $i = $numPhotos; $i > 0; $i-- ) { ?>
<td><a href="javascript
:void(0)" onMouseOver="gallerySwapInfo('galleryPhoto_<?php echo $i; ?>', <?php echo $numPhotos; ?>);"><img src="images/galleries/<?php echo $galleryNum; ?>/thumb/<?php echo $i; ?>.jpg" alt="" /></a></td>
<?php } ?>
</tr>
</table>
</div>
</div> <!-- end wn div -->
All of the javascipt code works great and the problem is in the width not being inherited by div lyr1 (only in IE). I have been able to make it work by adding a width to the lyr1 div but this doesn't help me because each gallery has a different number of thumbnails. Any help would be greatly welcomed. Thanks to all.
Before you post, read our: 
