homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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

Msg#: 4627950 posted 1:45 am on Dec 5, 2013 (gmt 0)

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>

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]



Msg#: 4627950 posted 12:11 am on Dec 9, 2013 (gmt 0)

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.


WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Msg#: 4627950 posted 12:30 am on Dec 9, 2013 (gmt 0)

Welcome to the Conditional Comment :)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved