CSS Forum

**nmilyaev** · 10:45 AM

I'm trying to implement a CSS-based onHover image enlarger, that is to work on a grid of images like the one on the following page:
http://www.eurexpress.org/ee/databas...uxassay_003268

I've found two really good examples:
1. http://www.dynamicdrive.com/style/cs...-image-viewer/
2, even neater one: http://www.cssplay.co.uk/menu/magnify.html

Both have problems with IE:
1- the "pop-up" enlarged image is not a link (but I need it to be): plus, IE and FF display pop-up at different position relatively to the thumbnail
2 - if I put two images side by side, as required, the "pop-up" appears "under" the adjacent image.

I much prefer the second variety. Can anybody help me overcome the z-index bug in the IE?

**LadynRed** · 07-13-2006, 11:12 AM

What doctype are you using ?? The CSSPlay version DOES work in IE 6. He is using XHTML strict.

**nmilyaev** · 07-13-2006, 11:30 AM

Hi LadynRed, thanks for the reply.

Doctype? HTML, No idea why would that matter?

I pasted my code below, check out.

In the meanwhile - No denial, it works in IE, but it stops working once I need two images side by side. Check for yourself!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<style type="text/css">
.image {position:relative;}
.image a img {border:0; z-index:-1;}
.image a.small:hover {text-decoration:none; border:0px; z-index:-1;}
.image a .large {display:block; position:absolute; visibility:hidden; z-index:100;}
.image a.small:hover .large {display:block; position:absolute; top:20px; left:50px; visibility:visible; padding:5px; background-color:lightyellow;
border:1px dashed gray; z-index:100;}

</style>
</head>

<body>

<h2>MAGNIFY IMAGE</h2>

<table>
<tr>
<td>
<div class="image">
<a class="small" href="#nogo" title="thumbnail image">
<img src="http://www.eurexpress.org/euximages/getImage?image=euxassay_000543_02.jpg&s=tb" title="Thumbnail image" alt="Thumbnail image" />
<img class="large" src="http://www.eurexpress.org/euximages/getImage?image=euxassay_000543_02.jpg&scale=15" title="Enlarged view of image" alt="Enlarged view of image" /></a>
</div>
</td>

<td>
<div class="image">
<a class="small" href="#nogo" title="thumbnail image">
<img src="http://www.eurexpress.org/euximages/getImage?image=euxassay_000543_02.jpg&s=tb" title="Thumbnail image" alt="Thumbnail image" />
<img class="large" src="http://www.eurexpress.org/euximages/getImage?image=euxassay_000543_02.jpg&scale=15" title="Enlarged view of image" alt="Enlarged view of image" /></a>
</div>
</td>

</TR>
</table>

</body>
</html>

**nmilyaev** · 07-13-2006, 11:39 AM

oh, pardon me,

the "style" bit of the file should be as follows:

<style type="text/css">
.image {position:relative;}
.image a img {border:0; z-index:-1;}
.image a:hover {text-decoration:none; border:0px; z-index:-1;}
.image a .large {display:block; position:absolute; visibility:hidden; z-index:100;}
.image a:hover .large {display:block; position:absolute; top:20px; left:50px; visibility:visible; padding:5px; background-color:lightyellow;
border:1px dashed gray; z-index:100;}
</style>

Although it works either way with the same effect - you can see the underlying thumbnail through the pop-up large image. Booooo....

**LadynRed** · 07-13-2006, 12:33 PM

If you want full support (or as close as IE gets) of the CSS methods, then DOCTYPE DOES matter.

I believe the problem is caused by the absolute positioning.

**nmilyaev** · 07-13-2006, 12:46 PM

Okay,

any hints how to fix the problem, then?

ta...

**nmilyaev** · 07-14-2006, 09:05 AM

Did some reading on DOCTYPE, tried to use headres for compliance and non-compliance with standard, to no avail... These bugs of IE are unsurmountable :-((((
IE must die...
Any other help, please?

**LadynRed** · 07-14-2006, 01:41 PM

They are not insurmountable at all. There is TONS published on how to work out an IE bug. It IS frustrating, all of us who do web design for a living are well aware of having to deal with the horrible IE. Unfortunately, IE 7 isn't going to be vastly improved either

Here are some resources on how to beat IE's bugs:
http://www.positioniseverything.net/ie-primer.html
http://www.positioniseverything.net/explorer.html

If you get rid of the absolute positioning and use relative positioning and/or floats, you can probably solve the problem.

You might also want to read this:
http://meyerweb.com/eric/css/edge/popups/demo2.html

**nmilyaev** · 07-20-2006, 12:53 PM

Thanks a lot, WebMistress,

The links you've sent are cool, but my struggle is still on!

Does anyone have a fix? Dont hesiteate to share...