CSS Photo Gallery problem in IE

Hi, I'm building a CSS gallery for my friend for his company site, however, the gallery works fine in Firefox but in IE theres an issue where the image that appears on hover appears behind the other images instead of on top.

heres the link to the page
http://www.vdavince.com/pages/gallery.php

and here's the CSS code associated with the photo gallery

.photoGallery {
cursor: default;
list-style: none;
}
.photoGallery a {
cursor: default;
}
.photoGallery a .preview {
display: none;
}
.photoGallery a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}
.photoGallery img {
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 125px;
height: 100px;
}
.photoGallery 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;
}
.photoGallery .preview {
border-color: #000;
width: 300px;
height: 300px;
z-index: 100;
}

thanks in advance for any help

The problem (as far I can make it out) is that, even though the li elements are inline, IE is treating them like inline blocks - so the previews are only appearing over the top of earlier li elements.

I'm drawing blanks as to how to fix this. You can't use your current technique if you get rid of the position:absolute from '.photoGallery a:hover .preview'.

I'm afraid the only thing I can suggest for now is either to change the layout - if you want to keep using your current technique, you'll have to load the preview pictures into a blank area so that there's no overlap (which would probably be easier to use and more accessible); or use some ECMAScript - something like the Javascript Photo viewer (http://www.hotscripts.com/Detailed/34313.html)

http://www.cssplay.co.uk/menu/lightbox.html

take a look a that and th eother 2 versions. I noticed you are using a transitional doctype. alot of the galleries on cssplay use strict. Ive noticed that without strict, IE doesn't like to play along. you might try changing your dotype to strict first.

thanks guys for your help.

I actually liked another gallery on the cssplay website so I'm going to follow his steps and hopefully that will work.

Again, thanks.