Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

IE7 when setting style.height content disappears

Posted on 2008-10-02
8
Medium Priority
?
2,076 Views
Last Modified: 2013-12-08
I have an iframe where dynamic content (a table with data) is loaded. An onload and onresize function will adjust the tables container div to the appropriate height. This works perfect in FF2, FF3 and IE6. Only in IE7 after setting the style.height the content of the iframe disappears. Hovering with the mouse cursor over the iframe the content reappears correctly.

Is this a known problem on IE7? Is there a workaround?
function ch(){
// tc is the div for the table which needs to be adjusted.
  var o = document.getElementById('tc');
  var h = (isIE() ? 85 : 100);
  var n = (isIE() ? document.documentElement.clientHeight : o.offsetParent.clientHeight)-h;
  var s = String(n) + 'px';
  o.style.height = s;
}

Open in new window

0
Comment
Question by:tjakober
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
8 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22629678
are you setting the style changes IN LINE in the IFRAME declaration, or are you making changes to the CSS?  List here the code to make the changes, just the crucial part of it.
0
 

Author Comment

by:tjakober
ID: 22639998
There is no change of the IFRAME at the time the posted function  runs. However the IFRAME size has been previously adjusted at the time when the container page with the IFRAMEs was loaded. It's done in the same way as the posted function. I tried both, setting the IFRAMEs size with the height property as well as with the style.height property. It's the same effect.

The IFRAME has no style assignements. The DIV mentioned in the code has some style assignements, but not IN LINE:
<style type="text/css">
html, body
{
	height: 100%;
	width:100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
 
#mainWrapper {
	/*height: 100%;*/
}
 
table.kopf {
	border-collapse: collapse;
}
 
table.kopf td {
	padding:2px;
	vertical-align: top;
}
 
.kopf thead tr {
	font-weight: bold;
	border-color: #000000;
	height: 25px;
}
 
.kopf thead td {
	background-color: #c7c7c7;
	border-color: #000000;
}
 
.num {
	text-align: right;
}
 
.cent {
	text-align: center;
}
 
.cur {
	color: red;
	font-weight: bold;
}
 
.fs {
	font-size: 0.8em;
}
 
.san {
	background-color: #99FF66;
	border-color: #707070;
}
 
.nor {
}
 
.noborder {
	border: 0px;
	padding: 0px;
}
 
#c1 {
	height: 60px;
}
#c2 {
	height: 22px;
}
#tc {                         // the div mentioned in the question
	width: 100%;
	height: 300px;
	overflow: auto;
}
 
</style>

Open in new window

0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22641459
if it works in everything but IE7, I would suspect it is to do with the DIV wrapper around the Iframe -- you don't need a DIV around an iframe, in fact, with the newer HTML specs that IE7 and FF3 is using, you may need to remove it before it works correctly.  If the DIV is for positioning the Iframe, then try setting the DIV CSS properties to --

DIV  { visibility:visible; Z-index:999; display:inline; overflow:visible; }

see what happens.
0
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 

Author Comment

by:tjakober
ID: 22641724
Oh no, the DIV is for positioning and sizing the table. The IFRAME is for receiving the dynamic content which includes a full HTML page including some other DIVs and the DIV in question which contain the table. I'll post the content of the IFRAME. The table which goes int the #tc div may vary in size and exceed the height of the IFRAME.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rauminformation</title>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" type="text/css" href="meili.css">
 
<script type="text/javascript" src="util.js">
</script>
 
<script type="text/javascript">
	function ch(){
 
		var o = document.getElementById('tc');
		var h = (isIE() ? 85 : 100);
		var n = (isIE() ? document.documentElement.clientHeight : o.offsetParent.clientHeight) - h;
		var s = String(n) + 'px';
		o.style.height = s;
		return;
	}
 
	document.write('');
</script>
 
<style type="text/css">
html, body
{
	height: 100%;
	width:100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
 
#mainWrapper {
	/*height: 100%;*/
}
 
table.kopf {
	border-collapse: collapse;
}
 
table.kopf td {
	padding:2px;
	vertical-align: top;
}
 
.kopf thead tr {
	font-weight: bold;
	border-color: #000000;
	height: 25px;
}
 
.kopf thead td {
	background-color: #c7c7c7;
	border-color: #000000;
}
 
.num {
	text-align: right;
}
 
.cent {
	text-align: center;
}
 
.cur {
	color: red;
	font-weight: bold;
}
 
.fs {
	font-size: 0.8em;
}
 
.san {
	background-color: #99FF66;
	border-color: #707070;
}
 
.nor {
}
 
.noborder {
	border: 0px;
	padding: 0px;
}
 
#c1 {
	height: 60px;
}
#c2 {
	height: 22px;
}
#tc {
	width: 100%;
	height: 300px;
	overflow: auto;
}
 
 
</style>
 
</head>
<body onload="ch();" onresize="ch();">
	<div id="mainWrapper">
		<div id="c1">
			<table class="noborder" width="100%">
				<tr>
					<td class="noborder"><h1>Rauminformationen</h1></td>
					<td class="noborder" valign="middle">Drucken&nbsp;</td>
 
					<td class="noborder" valign="middle"><a href="rauminfopdf.php?table=etage&amp;id=34&amp;order=pos" target="_blank"><img border="0" src="images/print.gif" title="Drucken" alt="Drucken"></a></td>
				</tr>
			</table>
		</div>
		<div id="c2">
			<h3>AUFN-V</h3>
		</div>
		<div id="tc">
 
			<table class="kopf">
				<colgroup>
					<col width="40">
					<col width="60">
					<col width="100">
					<col width="60">
					<col width="40">
					<col width="100">
					<col width="40">
 
					<col width="200">
					<col width="80">
					<col width="80">
					<col width="80">
					<col width="80">
				</colgroup>
				<thead>
					<tr>
						<td><span class="cur">Pos.</span></td>
 
						<td><a href="javascript:setOrder('esq, rsq')">Raum</a></td>
						<td>Bezeichnung</td>
						<td>Asbest</td>
						<td>PCB</td>
						<td>Bauteile</td>
						<td><a href="javascript:setOrder('kategorie')">Kat.</a></td>
 
						<td>Fundstelle</td>
						<td>Dimension</td>
						<td>Beurteilung</td>
						<td>Messprobe</td>
						<td>Asbestart</td>
					</tr>
 
				</thead>
				<tbody>
					  <tr>
    <td class="nor num"><a target="_top" href="screening.php?initial=table%3Dbefund%26id%3D2350%26screening%3D16">1</a></td>    <td class="nor" nowrap>V-3</td>
    <td class="nor">Technik</td>
    <td class="nor">AS</td>
 
    <td class="nor"></td>
    <td class="nor">Rohrleitung</td>
    <td class="nor cent">2</td>
    <td class="nor fs" width="400">vereinzelt Asbestbänder als Dichtungen, rein organoleptische Unterscheidung zu KMF-Dichtungen schwierig</td>
    <td class="nor"></td>
    <td class="nor">Verdacht</td>
    <td class="nor"></td>
 
    <td class="nor"></td>
  </tr>
  <tr>
    <td class="nor num"><a target="_top" href="screening.php?initial=table%3Dbefund%26id%3D2351%26screening%3D16">2</a></td>    <td class="nor" nowrap>V-3</td>
    <td class="nor">Technik</td>
    <td class="nor">Andere AA</td>
 
    <td class="nor"></td>
    <td class="nor">Boiler</td>
    <td class="nor cent">3</td>
    <td class="nor fs" width="400">Kessel, Bj. 1986</td>
    <td class="nor"></td>
    <td class="nor">Verdacht</td>
    <td class="nor"></td>
 
    <td class="nor"></td>
  </tr>
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:tjakober
ID: 22641740
For completion, here is the page which contains the IFRAME. The content mentioned goes into the IFRAME 'rf'.
<html>
<head>
  <title>Asbest - Raumprogramm</title>
  <link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css">
  <link rel="stylesheet" type="text/css" href="meili.css">
<script type="text/javascript" src="chromejs/chrome.js">
 
/***********************************************
* Chrome CSS Drop Down Menu- ý Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
 
</script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
var initial = "";
var tabProg = ['dspedit.php', 'showDocs.php', 'showPics.php', 'rauminfo.php'];
</script>
<style type="text/css">
body {
	overflow-y: hidden;
}
</style>
 
</head>
<body onload="adjust()" onresize="adjust()">
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="#" rel="dropmenu1">Projekte</a></li>
<li><a href="#" rel="dropmenu2">Screenings</a></li>
<li><a href="#" rel="dropmenu3">Dokumente</a></li>
<li><a href="#" rel="dropmenu4">Stammdaten</a></li>
</ul>
</div>
 
<div id="dropmenu1" class="dropmenudiv">
<a href="projekt.php">Daten</a>
 
<a href="team.php">Team</a>
<a href="users.php">Benutzer</a>
<a href="rollen.php">Rollen</a>
</div>
 
<div id="dropmenu2" class="dropmenudiv">
<a href="screening.php">Screening</a>
<a href="">Massnahmen</a>
</div>
 
<div id="dropmenu3" class="dropmenudiv">
<a href="">Textdokumente</a>
 
<a href="">Fotos</a>
</div>
 
<div id="dropmenu4" class="dropmenudiv">
<a href="raumprogramm.php">Raumprogramm</a>
<a href="copyet.php">Etagen kopieren</a>
</div>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
<h2>Raumprogramm</h2>
<table style="border:0px;"><tr>
<tr>
	<td></td>
 
	<td>
		<table width="100%">
			<tr>
				<td class="tab"  id="tab0" width="25%" style="background-color:#E0E0E0"><a href="javascript:chgTab(0)">Daten</a></td>
				<td class="tab"  id="tab1" width="25%"><a href="javascript:chgTab(1)">Dokumente</a></td>
				<td class="tab"  id="tab2" width="25%"><a href="javascript:chgTab(2)">Bilder</a></td>
				<td class="tab"  id="tab3" width="25%"><a href="javascript:chgTab(3)">Rauminformation</a></td>
 
			</tr>
		</table>
	</td>
</tr>
<td><iframe id="lf" name="ifTree" width="300" height="600" src="ajaxtree.php?levels=gebaeude,abk,abk;etage,bez,sq;raum,nr bez,sq bez&title=Raumprogramm&target=ifEdit"></iframe></td>
<td><iframe id="rf" name="ifEdit" width="700" height="600" src="about:blank"></iframe></td>
</tr></table>
</body>
</html>

Open in new window

0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22641951
the reason I asked is because if the DIV encases the <IFRAME> definition on the main page, it might simply be (in fact, most likely is) a visibility and focus issue.  The DIV would lose focus, so the iframe content will disappear, until you mouse over the DIV, which restores focus.  With a clean <IFRAME> definition on the main page, not enclosed by a DIV, there would be no problem in any browser.  Try what I put above.
0
 

Author Comment

by:tjakober
ID: 22656968
You put me into the right direction. The IFRAME seemed to loose focus. I have put a window.focus() statement behind the size change and that solved the problem.

Thanks alot!

Thomas
	function ch(){
 
		var o = document.getElementById('tc');
		var h = (isIE() ? 85 : 100);
		var n = (isIE() ? document.documentElement.clientHeight : o.offsetParent.clientHeight) - h;
		var s = String(n) + 'px';
		o.style.height = s;
		window.focus();
		return;
	}

Open in new window

0
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 1500 total points
ID: 22661377
setting focus to a form or other element in the iframe is definitiely another way to do it.  
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

670 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question