View Full Version : CSS Photo Gallery problem in IE

Jan 24th, 2007, 06:01 PM
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

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

Jan 25th, 2007, 12:05 PM
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)

Jan 25th, 2007, 01:28 PM

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.

Jan 25th, 2007, 11:07 PM
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.