Photo Gallery Hovering Problem (z-index?)

[mhgenterprises]

I am having a minor problem with a photo gallery on a site that I am working on. Here is a link: http://fieldspianos.com/new/store/photogallery.php?item_number=14275

In all browsers except IE6, when a thumbnail is hovered over, the image is displayed larger in the preview box. In IE6, however, this occurs properly, but once you roll over an image more than once it will not display anymore. For example, if I roll over the 1st thumbnail, the image displays, then I roll over the 2nd thumbnail, the image displays, but if I roll over the 1st thumbnail again, nothing happens. Included below is my css and html. This was made without javascript and I would like to keep it that way if at all possible.

HTML

<div id="sitebody">
<div id="tabsheader">
<ul id="primary">
<li><?php print "<a href=\"information.php?item_number=" . $item_number . "\">"; ?>Information</a></li>
<li><?php print "<a href=\"description.php?item_number=" . $item_number . "\">"; ?>Description</a></li>
<li><span>Photo Gallery</span></li>
<li><?php print "<a href=\"video.php?item_number=" . $item_number . "\">"; ?>Video</a></li>
<li><?php print "<a href=\"moreinfo.php?item_number=" . $item_number . "\">"; ?>More Info...</a></li>
</ul>
</div>
<div id="main">
<div id="contents">
<h2>Photo Gallery</h2>
<p class="note">Hover over the photos below to see larger images.</p>
<br />
<div id="photogallery">
<div id="thumbnails">
<ul class="hoverbox">
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img1.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img1.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img2.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img2.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img3.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img3.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img4.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img4.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img5.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img5.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img6.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img6.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img7.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img7.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img8.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img8.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img9.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img9.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img10.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img10.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img11.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img11.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img12.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img12.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img13.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img13.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img14.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img14.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img15.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img15.jpg" alt="description" class="preview" /></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>


CSS

/*Photo Gallery*/

div#photogallery {
position: relative;
width: 662px;
border: 1px solid #000;
padding: 1px;
padding-bottom: 2px;
height: 404px;
}

div#thumbnails {
width: 243px;
}

div#thumbnails ul {
margin-left: 0px;
padding-left: 0px;
}

.hoverbox
{
cursor: default;
list-style: none;
}

.hoverbox a
{
cursor: default;
}

.hoverbox a .preview
{
display: none;
}

.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: 2px;
left: 247px;
z-index: 1;
}

.hoverbox img
{
background-color: #FFFFFF;
border-color: #000;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 1px;
vertical-align: top;
width: 75px;
height: 75px;
}

.hoverbox img:hover
{
background-color: #000000;
border-color: #000;
border-style: solid;
border-width: 1px;
color: inherit;
vertical-align: top;
width: 75px;
height: 75px;
}

.hoverbox li
{
display: inline;
float: left;
margin: 1px;
}

.hoverbox .preview
{
border-color: #000;
width: 409px;
height: 399px;
}

[mhgenterprises]

anyone?

[Excavator]

Hello mhgenterprises,
I didn't dowload your code to edit it locally so I don't know if this will fix it. A lot of times, when hover doesn't work the way you want, I've found the attributes presented in the wrong order in the CSS. It should be link, visited, hover, active. Just remember LoVeHA.
It's ok to leave one out, like visited will just default to link if you don't specify it.

Like I say, not a clue if that's the problem but...

[mhgenterprises]

That seemed like it would fix it but no such luck, the problem still exists. Anyone else?

[effpeetee]

That seemed like it would fix it but no such luck, the problem still exists. Anyone else?
This link may prove of interest.

Frank

IE's bugs http://www.webmasterworld.com/forum83/4161.htm