PDA

View Full Version : CSS image gallery problem in IE



evilelf
May 21st, 2007, 05:26 AM
First off, my site can be found at www.themultimediasite.com/ron

When you roll over a thumbnail in one of the galleries a larger image is supposed to be displayed beneath it. In firefox it works fine and the larger image shows up, but in version 6 and earlier of internet explorer the large image doesn't appear.

What I did was preload the large image off-screen using the position attribute in CSS. I then have the image shift into view when a certain thumbnail is rolled over. Can anybody explain why it doesn't work in IE? I have supplied the CSS if that helps.

To load it off screen this is the CSS:
#nav li ul {
position: absolute;
left: -5000px;
top: 250px;
}

To move it when rollover occurs, this is the CSS:
li#slot2:hover ul {
margin-left: -45px;
left: auto;
width: 600px;
height: 280px;
}

koyama
May 22nd, 2007, 03:31 PM
Well, it looks like you may have changed the page. I don't see the elements that you are mentioning.

Your code above depends on the li:hover selector. Keep in mind that in IE6 the :hover pseudo class is only supported for anchor elements with an href attribute. To get it working in IE6, JavaScript may be the right solution for you.

evilelf
May 22nd, 2007, 08:37 PM
Oh I'm sorry, I did put the wrong link. This is the page with the gallery: http://themultimediasite.com/ron/print.html

I thought I might have to go with javascript to get my galleries working. I'm not too familiar with javascript though. Do you know where I could find some examples or tutorials?

riptide
May 22nd, 2007, 08:47 PM
dd has a css code that can do this with out javascript. I used it
just go to dynamic drive and look under image