Problem with IFRAMES in Firefox

**medvegonok** · 06-15-2006, 03:43 PM

Please look at http://www.smarteus.com/test.html
There are 3 lines in the table there. When pressed each line is supposed to open/close IFRAME below itself. It works fine in IE, but in Firefox after number of opens/closes of some line you can see that a shadow aggregates below it.
Could somebody help me to resolve this?

**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:

HTML Code:

<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:

Code:

<!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">&nbsp;</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>
<!--[if IE]>
<tr id="ieShim"><td colspan="2"></td>
</tr>
<![endif]-->
</table>
</body>
</html>

Thread: Problem with IFRAMES in Firefox

Thread Tools

Search Thread

Problem with IFRAMES in Firefox

Bookmarks

Bookmarks

Posting Permissions