Hover Image doesn't go away in IE6

[Pirellio]

Works good in FF, in IE6 the images appear, but when I mouse out the images stay, even when I mouse over the next preview.

IE6 images stay, need to have them go away on mouse out.

<style type="text/css">

/* =Hoverbox Code
----------------------------------------------------------------------*/

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

.hoverbox a
{
cursor: default;
}

.hoverbox a .preview
{
display: none;
}

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

.hoverbox img
{
background: fff;
border-color: aaa ccc ddd bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 125px;
}

.hoverbox li
{
background: eee;
border-color: ddd bbb aaa ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}

.hoverbox .preview
{
border-color: 000;
width: 300px;
height: 300px;
}
</style>


<ul class="hoverbox">
<li><a href="#">View Larger<img src="products/myimage.jpg" alt="description" class="preview"></a></li>
</ul>

 

[BillyRayPreachersSon]

Do you have a URL to a live version?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Pirellio]

yes

http://www.cheshirecatgifts.com/Cheshire.Cat.Gift.Baskets.607.217.7191/Baby.cfm

I got it to work, found this.


.hoverbox a
{
position: relative;
}

.hoverbox a:hover
{
display: block;
font-size: 100%;
z-index: 1;
}

.hoverbox a:hover .preview
{
top: 25px;
left: -70px;
}

.hoverbox li
{
position: static;
}