JPG image in iframe not displaying in IE - OK in other browsers

iframe that opens on rollover fails to display enlarged image in IE only

[Gurusinc]

I have several pages that include a small image that on rollover, opens an iframe with an enlarged version of that image. It works as expected in Safari, FF, Google and others. But in IE, although the iframe opens on rollover, the iframe is empty, with only the border showing and a white background. The latest version of IE that I have is IE7, so that's where I'm seeing the problem.

I have tried changing the SRC to a root-based format, as well as to a full URL. I've also made many changes to the CSS file - all with no luck.

Here is the code for the rollover.

<a class="zoomimg href="photos.html"><img src="images/24511-front-sm.jpg" title="Widget for Sale by Owner in Houston (Oakhurst @ Kingwood)" alt="Widget for Sale in Houston (Oakhurst @ Kingwood)" width="705" height="426" hspace="4" vspace="0" border="1" align="left"><span>
 <iframe src="images/24511-front-full.jpg" width="1200" height="726" marginwidth="2" marginheight="2" scrolling="auto"></iframe></span></a>

There is also some text on the same page, where rolling over the text opens a photo in an iframe and that rollover works in all of the tested browsers except IE7. The symptoms are the same. Here is an example of that code:

<li>Across the street is green space and only 200 feet from your front door is a gazebo and Playground equipment (<a class="zoomimg" href="images/24511-to-gazebo.png" alt="Location of gazebo in relation to home for sale in Oakhurst">rollover here to see photo<span>
 <iframe src="images/24511-to-gazebo-full.png" width="1200" height="676" marginwidth="2" marginheight="2" scrolling="auto"></iframe>
 </span></a>).</li>

Here is the CSS for "zoomimg", as it stands now (I'm still playing with it):

a zoomimg {
position: absolute;
z-index: 0;
}

img zoomimg {
position: absolute;
z-index: 0;
}

.zoomimg:hover {
background-color: transparent;
z-index: 50;
}

.zoomimg span {
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1300px;
border: 2px solid #404522;
visibility: hidden;
color: black;
text-decoration: none;
}

.zoomimg span a {
border-width: 0;
padding: 2px;
}

.zoomimg span img {
border-width: 0;
padding: 2px;
visibility: visible;
z-index: 1001;
}

.zoomimg:hover span {
position: absolute;
z-index: 1000;
visibility: visible;
top: 10px;
left: 10px;
display: inline-block;
/* [disabled]clear: both; */
overflow: visible;
color: #000;
}

Since this page is not yet ready for public viewing, I don't want to create a link here, for the search engines to follow. So I'll break up the URL. The site is "example.com/". The rest of the URL is "24511-temp/location.html".

Any help will be appreciated.

…

(And yes, before anyone mentions it, I've added NOINDEX and NOFOLLOW to the head section of that file. But not all search engines play by those rules. That's why I don't make it easy for those guys to find that area before I'm ready, by posting links in forums.)

[edited by: bill at 1:46 am (utc) on Dec 6, 2013]
[edit reason] No URLs or specifics as per TOS [/edit]

[Gurusinc]

I managed to get the images to display in the iframe in IE, but then got the flickering problem. So I abandoned placing the enlarged photo in the iframe, in IE and chose instead, to offer up two versions of that link - one for IE, that opens the enlarged image in a new window, when clicked and another version that opens the enlarged image in an iframe when hovered, for all other browsers.

[lucy24]

Welcome to the Conditional Comment :)