Photo Hover CSS won't work in IE 6, 7 --- HELP

I've seen a lot of posts about how CSS doesn't work quite right in IE 6 or 7 when it comes to Hover boxes - or in my instance, a photo hover.

I'm here to post my code because I simply cannot figure out why it won't work, please help! I appreciate it.

CSS CODE:

*
{
border: 0;
margin: 0;
padding: 0;
}

/* =Basic HTML, Non-essential
----------------------------------------------------------------------*/

a
{
text-decoration: none;
}

body
{
background: #fff;
color: #777;
margin: 0 auto;
padding: 50px;
position: relative;
width: 620px;
}

h1
{
background: inherit;
border-bottom: 1px dashed #ccc;
color: #933;
font: 17px Georgia, serif;
margin: 0 0 10px;
padding: 0 0 5px;
text-align: center;
}

p
{
clear: both;
font: 10px Verdana, sans-serif;
padding: 10px 0;
text-align: center;
}

p a
{
background: inherit;
color: #777;
}

p a:hover
{
background: inherit;
color: #000;
}

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

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

.hoverbox a
{
cursor: default;
}

.hoverbox a .preview
{
display: none;
}

.hoverbox a:hover .preview
{
display: inline;
position: relative;
top: -33px;
left: -45px;
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: 75px;
}

.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: 200px;
height: 150px;
}

HTML - it's a huge page of photos, here is a bit of the html:

<h2>NWIBRT 2010 Golf Outing</h2>
<ul class="hoverbox">
<li><a href="#"><img src="/data/dmsnwibrt/image/Untitled-1.jpg" alt="" width="327" height="245" /><img class="preview" src="/data/dmsnwibrt/image/Untitled-1.jpg" alt="" width="327" height="246" /></a> </li>
<li><a href="#"><img src="/data/dmsnwibrt/image/Untitled-3.jpg" alt="" width="327" height="245" /><img class="preview" src="/data/dmsnwibrt/image/Untitled-3.jpg" alt="" width="327" height="245" /></a></li>
<li><a href="#"><img src="/data/dmsnwibrt/image/Untitled-4.jpg" alt="" width="327" height="245" /><img class="preview" src="/data/dmsnwibrt/image/Untitled-4.jpg" alt="" width="327" height="245" /></a></li>
<li><a href="#"><img src="/data/dmsnwibrt/image/Untitled-5.jpg" alt="" width="327" height="245" /><img class="preview" src="/data/dmsnwibrt/image/Untitled-5.jpg" alt="" width="327" height="245" /></a></li>
<li><a href="#"><img src="/data/dmsnwibrt/image/Untitled-8.jpg" alt="" width="327" height="245" /><img class="preview" src="/data/dmsnwibrt/image/Untitled-8.jpg" alt="" width="327" height="245" /></a></li>
<li><a href="#"><img src="/data/dmsnwibrt/image/Untitled-9.jpg" alt="" width="327" height="245" /><img class="preview" src="/data/dmsnwibrt/image/Untitled-9.jpg" alt="" width="327" height="245" /></a></li>
</ul>
<p style="clear: both; text-align: center;"><a href="/index.cfm/fuseaction~home.home/pid~43/page~NWIBRT_Safety_Seminar_2010_Photos">View Full Gallery</a></p>
<p> </p>

Javascript with onmouseover and onmouseout will work fine on just about any browser, including those. You can have it change the display property. You can use the css and javascript both.

IE6 doesn't support :hover on anything but a tags - this might be problematic in IE6:

.hoverbox a:hover .preview


IE7 should be OK though. EDIT: And so should IE6 with a it of messing about.

A link to your page would help since we're talking about images here. Failing that, what is it that's going wrong in IE6/7 - are you just not getting the hover behaviour at all? And it's OK in Firefox? Do you have a valid doctype (http://www.alistapart.com/articles/doctype/) on your page?

Here is the link to the site: http://www.nwibrt.org/index.cfm/fuseaction~home.home/pid~26/page~Photos

Thank you for your replies.

I'm new to this type of thing and unsure how to do this w/o having to redo the entire CSS. There are loads of photos.

The site is okay in Firefox and IE8. I just want the hover to work, and also I was told for the IE6/7 the pics were going behind everything else instead of hovering to the front.

It's a huge mess, one which I'm not sure how to fix.

If I use javascript, how do I add there, or should I say where? I'd rather, and hope, the fix would be as simple as some extra or deleted CSS. I think that's a far reach though.

Jen

You have a huge blank space at the top of your page. The doctype should be on the very first line.

jenjen, having googled hoverbox, it looks like you are missing the IE fixes provided here (http://sonspring.com/journal/hoverbox-image-gallery). Have a try with adding these conditionally to your page.

Below this code already in your header:

<style type="text/css">
/**************************
HEADER
**************************/
#header {
background-color: #ffffff;
background-image:url(/data/dmsnwibrt/images/bg.jpg);
background-repeat: repeat-x;
height: 171px;
}
#leftnav a{
background-image:url(/data/dmsnwibrt/images/buttonbg.jpg);
background-repeat:no-repeat;
font-family:Tahoma, Geneva, sans-serif;
font-size: 14px;
color: #fff;
font-weight: bold;
text-align: center;
display:block;
width: 181px;
height: 36px;
margin-bottom: 10px;
text-decoration: none;
padding-top: 7px;
}
#leftnav a:hover{
background-image:url(/data/dmsnwibrt/images/buttonbghover.jpg);
background-repeat:no-repeat;
text-decoration: none;
color: #000;
font-weight:bold;

}

</style>

add this:

<!--[if lte IE 7]>
<style type="text/css" media="screen">
.hoverbox a
{
position: relative;
}

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

.hoverbox a:hover .preview
{
top: -38px;
left: -50px;
}

.hoverbox li
{
position: static;
}
</style>
<![endif]-->

which will apply conditional css to IE7 and under.