Problems with iframes in IE [Archive]

lastlifelost

08-26-2009, 12:18 PM

Hello all! I'm having some issues with iframes in IE. The site in question is http://sosimagesonline.com/sosimages/index.htm and I'm trying to use the frames to make some menus. Everything works great in Opera, FF and the like, but IE only loads blank white frames. What am I doing wrong? The code in question is listed below (the site still a WIP, so don't mind the mess...).

/****************************/
/* NAVIGATION MENU */
/****************************/
div.mainmenu {
color: #ddf;
position: absolute;
top: 210px;
}
div.menu {
text-align: center;
float: left;
clear: left;
margin-left: 10px;
}
div.menu div.category {
border-right: 1px solid #ddf ;
color: #67c;
font-weight: bold;
height: 80px;
width: 30px;
float: left;
}

/* Popup info */
div.popup {
display: none;
}
div.menu:hover div.popup {
display: block;
color: #ddf;
border: 1px solid #ddf;
padding: 10px;
width: 710px;
height: 388px;
position: absolute;
left: 30px;
top: 0px;
}
div.popup img {
padding: 10px;
background: #000;
margin: 0 10px 10px 0;
border: 1px solid black;
}
div.popup img:hover {
border: 1px solid #ddf;
background: #124;
}
div.popup div, div.popup a {
text-decoration: none;
}
/* Spacing for vertical line items *//*
div.popup div + div, div.popup a + a {
margin: 10px 0 0 0;
}
*/
/* Formating for Contact info */
div.popup dl{
font-size: 1.5em;
text-align: center;
}
div.popup dt {
float: left ;
width: 200px;
}
div.popup dd {
margin-left:200px
}
.poplink a:link , .poplink a:visited {
color: #ddf;
text-decoration: none;
}
.poplink a:hover {
color: #56c;
text-decoration: underline;
}
.poplink a:active {
color: #117;
}
/* End Popup info */
iframe {
height: 388px;
width: 100%;
border: 0px solid #000; /* removes iframe border */
}
div.noframe {
background: #000;
color: #ddf;
width: 680px;
height: 358px;
padding: 15px;
text-align: center;
font-size: 1.25em;
line-height: 150%
}
div.noframe h2 {
font-size: 1.1em;
}
div.noframe ul {
list-style-type: none;
}

/* Button info */
div#web:hover div.category , div#print:hover div.category , div#art:hover div.category , div#contact:hover div.category {
color: #ddf;
background: #000;
border: 1px solid #ddf;
}
/* Positioning for menu items: MANDATORY */
/* Each div#ID must increase z-index */
/* each div#button must be positioned to fit */
div#web {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
div#web div#button{
height: 4em;
position: absolute;
top: 0px;
left: 0px;
}
div#print {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
}
div#print div#button{
height: 6em;
position: absolute;
top: 5em;
left: 0px;
}
div#art {
position: absolute;
top: 0px;
left: 0px;
z-index: 3;
}
div#art div#button{
height: 4em;
position: absolute;
top: 12em;
left: 0px;
}
div#contact {
position: absolute;
top: 0px;
left: 0px;
z-index: 4;
}
div#contact div#button{
height: 8.5em;
position: absolute;
top: 17em;
left: 0px;
}
/* End button info */

/****************************/
/* END NAVIGATION */
/****************************/

<body>
<div id="layer1" class=""> 
<div id="header" class="">
<a href="index.htm"><img alt="Sos Images - Web and Print Marketing Solutions" src="images/headimg.png" height="197" width="863" border="none"/></a>
</div>
<div id="layer2" class=""> 
<div id="layer3" class=""> 
<div id="main" class=""> 
<div class="mainmenu" id="mainmenu">
<div id="web" class="menu">
<div id="button" class="category">W<br />e<br />b</div>
<div id="" class="popup">
<iframe src="web.htm">
<p>Your browser does not support iframes.</p>
</iframe>
</div> 
</div>
<div id="print" class="menu">
<div id="button" class="category">P<br />r<br />i<br />n<br />t</div>
<div id="" class="popup">
<iframe src="http://www.sosimagesonline.com/contact">
<p>Your browser does not support iframes.</p>
</iframe>
</div> 
</div>
<div id="art" class="menu">
<div id="button" class="category">A<br />r<br />t</div>
<div id="" class="popup">
<h2>Art and Other Samples</h2>
<a href="#top"><img alt="Web Samples" src="images/webthumb.jpg" height="80" width="127" /></a>
<a href="#top"><img alt="Web Samples" src="images/webthumb.jpg" height="80" width="127" /></a>
</div> 
</div>
</div>

lastlifelost

08-26-2009, 06:52 PM

Update:

The frame works fine in the other browsers. FF, Opera, etc all show the right content. IE, however, will not display my other pages inside the iframe, though they will render if the URl's are entered manually. Interestingly, IE will display some sites in the frame, such as yahoo, just fine, but breaks when you try to use others, such as google.

Any thoughts out there?

lastlifelost

08-29-2009, 10:11 AM

I'm still having trouble here. For some reason, I can't get IE to load content in a hidden iframe to popup when the div is hovered. And, on the rare occasion that it does work, mousing over the iframe causes the div to close. It works just fine in all the other browsers! Does anyone have some insight here?

Sample Page: Sos Images Online (http://sosimagesonline.com/sosimages/index.htm)

The issue right now is in the top two menu options. Works fine in Opera, Safari, FF, but IE breaks. THANKS Microsquish!