Problem with IFRAMES in Firefox [Archive]

jscheuer1

06-17-2006, 05:52 AM

You are missing a third iframe on your demo page. Anyways, that looks to be just the frame border (frameborder="1"), which looks a bit different in FF than in IE. To get a custom frame border in most browsers set frameborder="0" and use style to set the border for the iframe:

<iframe frameborder="0" style="border-top:1px solid #ddd;border-right:1px solid #eee;border-bottom:1px solid #eee;border-left:1px solid #ddd;"></iframe>

Other than that, I noticed no real problem in FF. In Opera however, the table background shows through (#444444) whenever an iframe is displayed as the layout of the table shifts. This is due to faulty design of the table. It would be best to avoid the table altogether if possible.

jscheuer1

06-17-2006, 10:14 PM

I'm not sure what you were shooting for exactly but, give this version of your demo a try:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tabled Iframes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color:#6666ff;
color:#111;
}
#frames {
border-collapse:collapse;
width:95%;
margin:0 auto;
}
#frames td {
padding:3px;
margin:0;
text-align:center;
background-color:#fff;
color:#000;
border:1px solid #444;
}
.lined {
cursor:pointer;
}
#frames td.unlined {
border-width:0;
padding:10px 0;
background-color:transparent;
}
#frames td.dark {
cursor:auto;
background-color:#be8f8f;
color:#000;
}
#frames iframe {
width:100%;
height:100px;
background-color:#fff;
}
</style>
<script type="text/javascript">
function open_close(el){
var theRows=el.parentNode.rows
for (var i_tem = 0; i_tem < theRows.length; i_tem++)
if (el==theRows[i_tem])
break;
if(el.parentNode.rows[i_tem+1])
var trg=el.parentNode.rows[i_tem+1];
else
return;
var flag=el.getElementsByTagName('img')[0];
flag.title=el.title=flag.title=='Open'?'Close':'Open';
trg.style.display = flag.src.indexOf('minus')>-1 ? 'none' : '';
flag.src = flag.src.indexOf('minus')>-1 ? 'plus.gif' : 'minus.gif';
}
if (document.getElementById&&!document.all)
document.write('<style type="text\/css">\
#frames iframe {\
position:relative;\
left:-2px;\
}\
<\/style>')
</script>
</head>
<body>
<table id="frames">
<tr>
<td width="10%" class="lined dark"> </td>
<td width="90%" class="lined dark">Id</td>
</tr>
<tr onclick="document.getElementById('frame0').src='testhelp.htm';open_close(this);" title="Open">
<td width="10%" class="lined"><img src="plus.gif" alt="Open/Close" title="Open"></td>
<td width="90%" class="lined">0</td>
</tr>
<tr id="closeFrame0" style="display:none;">
<td class="unlined" colspan="2">
<iframe scrolling="no" id="frame0" frameborder="1" marginwidth="0" marginheight="0" src="about:blank"></iframe>
</td>
</tr>
<tr onclick="document.getElementById('frame1').src='testhelp.htm';open_close(this);" title="Open">
<td width="10%" class="lined"><img src="plus.gif" alt="Open/Close" title="Open"></td>
<td width="90%" class="lined">1</td>
</tr>
<tr id="closeFrame1" style="display:none;">
<td class="unlined" colspan="2">
<iframe scrolling="no" id="frame1" frameborder="1" marginwidth="0" marginheight="0" src="about:blank"></iframe>
</td>
</tr>
<tr onclick="if(typeof ieShim!=='undefined'){ieShim.style.display=ieShim.style.display=='none'?'block':'none'};document.getElementById('frame2').src='testhelp.htm';open_close(this);" title="Open">
<td width="10%" class="lined"><img src="plus.gif" alt="Open/Close" title="Open"></td>
<td width="90%" class="lined">2</td>
</tr>
<tr id="closeFrame2" style="display:none;">
<td class="unlined" colspan="2">
<iframe scrolling="no" id="frame2" frameborder="1" marginwidth="0" marginheight="0" src="about:blank"></iframe>
</td>
</tr>

</table>
</body>
</html>