CSS Pop Up Image Viewer - IE Iframe problem

[Makaveli19]

Hello Everybody,

I'm hoping somebody can help me out. I am using the CSS Popup Image Viewer script from Dynamic Drive, Url is located here http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/.

It's amazing and I love the way it works, however I did run into an annoying little problem.

I found that when applying an Iframe to show up in the pop up box the script doesn't work in IE 7. Rather then images I am trying to show maps. Here is an example page, http://www.tbaye.com/hoverbox/.

Here is the code I used


<a class="thumbnail" href="#thumb">Test Map Not working in IE<span><iframe scrolling="no" style="width:480px; height:410px; border:0px;" frameborder="0" src="http://www.tbaye.com/googlemaps.php?id=116"></iframe><br />This doens't work in IE</span></a><br />

If you test it out, everything is great in Firefox, but I run into problems with IE 7. It's definitely an Iframe problem because I tried to put regular content (non maps) and it still doesn't work. As long as the Iframe code is there you will see a blank white spot in IE.

Does anybody know why? Any help would be GREATLY appreciated!

Thanks.

[jscheuer1]

It appears to be a minor bug. Put this after your stylesheet link:


<!--[if IE]>
<style type="text/css">
.thumbnail span {
visibility:visible;
}
</style>
<![endif]-->

But, you still won't be able to use the map, as while you are over it, you are no longer over the trigger.

[Makaveli19]

John,

Awesome! Thanks for your help.

Does IE not recognize the Iframe as a trigger? It seems if I hover over just the border the window stays open, the the minute my mouse goes over the map, it's gone.

Is there anyway to keep the map open when hovering? Is it possible to add some kind of recognizable layer over the map to keep it open while hovering?

I really appreciate your help.

Steve

[jscheuer1]

Oddly enough (because this usually is not the case) IE seems to be behaving correctly as far as the hover state of the link goes. An iframe is a window. The mouse cannot be over two windows at once. When it is over the iframe, it is off of the page with the trigger on it, and so off of the trigger.

If you need a stable yet dismiss-able iframe for interactive content, you should get a script for it. Css alone just won't work, and really has no advantage if the content in the iframe requires script anyway.

One script you might consider is the Window Widget:

http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/index.htm