hey guys,

i've built an image gallery and i'm using the hoverbox css technique if any of you know it

here's mine : Photo Galleries - Dun Laighaire Marina - Power Boats - Yachts - Berths

if you mouseover the images they should expand..

something along the lines of

.class {display:none;}
.class:hover {display:block}

works fine in opera, firefox, ie7 etc but in ie6 the images don't revert to their normal sizes.

any help is much appreciated.

ps here's the hoverbox css
PHP Code:
.hoverbox
{
 cursor: default;
 list-style: none;
 padding: 0px;
 margin: 0px;
}
.hoverbox a
{
 cursor: hand;
}
.hoverbox a .preview
{
 display: none;
}
.hoverbox a:hover .preview
{
 display: block;
 position: absolute;
 top: -33px;
 left: -25px;
 z-index: 1;
}
.hoverbox img
{
 background: #ffffff;
 border-color: #aaa #ccc #ddd #bbb;
 border-style: solid;
 border-width: 1px;
 color: inherit;
 padding: 2px;
 vertical-align: top;
 width: 100px;
 height: 67px;
}
.hoverbox li
{
 display: inline;
 float: left;
 margin: 1px;
 padding-left: 20px;
 position: relative;
 width: 112px;
 height: 94px;
 text-align: center;
 line-height: 18px;
}
.hoverbox .preview
{
 border-color: #3E96FF;
 width: 192px;
 height: 128px;
} 
and here's my main css
PHP Code:
/* CSS Document */
body{
 top: 0px;
 background-image: url(../images/waterhead.gif);
 background-repeat: repeat-x;
 background-position: 0px 0px;
 background-color: #00749B;
 font-family: arial;
 color:#FFFFFF;
}
a {color:#FFFFFF;}
h1 {font-size:13px;
font-weight:bold;
margin: 2px;
margin-left: 0px;
}
.link{
color:#ffffff;
text-decoration:none;
}
.link:hover{
color:#50A4D1;
text-decoration:none;
}
.adminlink{
color:#ffffff;
text-decoration:none;
}
.adminlink:hover{
color:#000066;
text-decoration:none;
}
h2 {font-size:12px;
font-weight:bold;
margin: 2px;
margin-left: 0px;
}

#header {
position:absolute;
 margin-left: -400px;
 left: 50%;
 padding: 0px;
 height: 85px;
 width: 800px;
 top: 20px;
}
.toplink {
 list-style-type:none;
 font-family:arial;
 font-size: 10px;
 text-decoration:none;
 color:#ffffff;
}
.toplink:hover {
 list-style-type:none;
 font-size: 10px;
 text-decoration:none;
 color:#6AB5FF;
}
#topnav {
 width: 680px;
 margin-left: -305px;
 position: absolute;
 left: 50%;
 height: 10px;
 top:65px;
 text-align:right;
}
#topnav li {
 list-style-type:none;
 list-style:none;
 margin: 0;
 display:inline;
 padding-left: 15px;
 }
#maincontentborder {
position:absolute;
top: 120px;
background: #2383a3;
width: 840px;
margin-left: -420px;
left:50%;
height: 500px;
background-image:url(../images/botgrad.gif);
 background-repeat: repeat-x;
 background-position: bottom;
}
#outertopleft {
 font-size:4px;
 float:left;
 width: 10px;
 height: 10px;
 background-color:#00749B;
 background-image:url(../images/tl.gif);
 background-repeat:no-repeat;
 }
 
#outertopright {
 float:right;
 font-size:4px;
 width: 10px;
 height: 10px;
 top: 0px;
 margin-right: 0px;
 padding-right:0px; 
 background:url(../images/tr.gif) #00749B no-repeat;
 }
#innertl {
 float:left;
 width: 10px;
 height: 15px;
 top: 0px;
 background-color:#2383a3;
 padding: 0px;
 overflow:hidden;
 background-image:url(../images/tlinner.gif);
 background-repeat:no-repeat;
}
#innertr {
 position:absolute;
 width: 15px;
 height: 15px;
 top: 0px;
 left: 790px;
 visibility: visible;
 background-color:#2383a3;
 background-image:url(../images/trinner.gif);
 background-repeat:no-repeat;
  }

#mainnav {
margin-top:10px;
margin-left:30px;
width:auto;
}
#mainnav ul {
display:inline;
list-style:none;
list-style-type:none;
padding:0px;
margin-left:0px;
margin-top:0px;
}
#mainnav li {
display:inline;
list-style:none;
list-style-type:none;
padding: 0px;
}
.mainnavlinksplit {
font-size:10px;
color:#50A4D1;
padding-left: 15px;
padding-right: 15px;
bottom: 4px;
}
.mainnavlink{
font-family:Arial;
font-size:14px;
color:#ffffff;
text-decoration: none;
list-style-type:none;
display:inline;
font-weight:bold;
}
.mainnavlink:hover{
font-family:Arial;
font-size:14px;
font-weight:bold;
color:#50A4D1;
text-decoration: none;
list-style-type:none;
display:inline;
}
#maincontent {
position:absolute;
top: 20px;
background: #00749B;
width: 800px;
margin-left: -400px;
left:50%;
height: 142%;
margin-bottom:0px
}
#content1 {
height: auto;
}
.content2 {
float:left;
position:relative;
margin-top:10px;
width: 450px;
height: auto;
background-color:#2383a3;
}
#sidecontent1 {
height: auto;
background-color:#2383a3;
}
.sidecontent2 {
margin-top:10px;
height: auto;
background-color:#2383a3;
}
.conttl {
 width: 10px;
 height: 10px;
 font-size: 4px;
 margin-top: 0px;
 float: left;
 background-color:#00749B;
 padding: 0px;
 background-image:url(../images/tl.gif);
 background-repeat:no-repeat;
}
.contbl {
 width: 10px;
 height: 10px;
 bottom: 0px;
 font-size: 4px;
 left: 0px;
 background-color:#00749B;
 padding: 0px;
 background-image:url(../images/bl.gif);
 background-repeat:no-repeat;
}
.conttr {
 width: 10px;
 height: 10px;
 font-size: 4px;
 margin-top: 0px;
 float: right;
 background-color:#00749B;
 padding: 0px;
 background-image:url(../images/tr.gif);
 background-repeat:no-repeat;
}
.contbr {
 width: 10px;
 height: 10px;
 float:right;
 margin-top: -10px;
  font-size: 4px;
  background-color:#00749B;
 padding: 0px;
 background-image:url(../images/br.gif);
 background-repeat:no-repeat;
}
.contenttext {
position:relative;
padding: 10px;
font-size: 12px;
text-align:justify;
}
#leftcontents {
float:left;
margin-top: 10px;
margin-left: 20px;
width: 450px;
height:auto;
display:inline;}
#rightcontents {
float:left; 
width: 290px;
display:inline;
height:auto;
padding-left:20px;
padding-top:10px;
}
#whatnetworks {
clear:both;
font-size:9px;
padding-top:10px;
}
.smalltext { font-size:10px;}
#centrecontents {
float:left; 
width: 820px;
display:inline;
height:auto;
padding-left:20px;
padding-top:10px;
}
.centrecontent {
margin-top:10px;
width: 760px;
height: auto;
background-color:#2383a3;
}