PDA

View Full Version : DD popup image viewer and ie6



rvandam
05-15-2007, 10:00 AM
I have used the dd popup viewer in my site, and modified the script a little to get the larger image in the right position. This works fine with Firefox and ie7, but not in ie6 and ie5.5

Here is the link to the dd script:

http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

And here is the link to my site (under construction)

http://www.nederlandshandelshuis.nl/verhuur/

What can i do to make the popups working in ie6?

Btw: the original script works fine with ie6

Veronica
05-15-2007, 03:38 PM
The pictures need to be written as links, otherwise IE6 won't recognize the hover changes. So you would use:

<a class="thumbnail1" href="#thumb"><img src="plaatjes/interieur1_thumb.jpg" alt="stacaravan interieur" /><span><img src="plaatjes/interieur1.jpg" alt="winterswijk verhuur" /></span></a>

rvandam
05-15-2007, 05:49 PM
Thanks a lot!!! That was it. :)

I have a (smaller) problem now, because Firefox doesn't display the first image in the right position after i changed the line. The IE versions display all photo's correctly now. :confused:

Veronica
05-15-2007, 07:38 PM
The page looks fine in both IE6 and IE7. But in FF, yes, the hover photo is too low. I tried adjusting the top so it worked in FF, but it messed it up in both IEs. You could adjust the css to work in FF and use conditional css for IE. Does making the photos smaller help? Sorry, but I can't think of anything else.

rvandam
05-15-2007, 08:39 PM
Thanks for the reply.

I will try to resize the photo's a bit. Perhaps it works. I also found out that Opera really messes up the whole thing. I will look how it works with one photo, and only a few code.

rvandam
05-16-2007, 09:38 AM
The problem is solved mostly now.

For Opera i had to remove the size declarations for the small images from css.

To work with Firefox correctly I had to change the top declaration into bottom in this part of the css file:

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
bottom: 134px;
/*margin-top: -510px;*/
left: 0px; /*position where enlarged image should offset horizontally */
}

One small issue with Opera is left. The page is also rendering the bigger photos on other parts of the page. When you move the mouse in the area under the menu, you will see the bigger photos flickering.

Veronica
05-16-2007, 02:18 PM
Much better! But you should restore the height and width for the div hoofd, otherwise the photos don't display across the bottom correctly.

#hoofd {
width: 700px;
height: 600px;
margin-left: 378px;
}

rvandam
05-16-2007, 04:07 PM
Done!

Thanks again :)