I have a simple frameset with two frames vertically, i.e. two rows:
First row contains a fixed header.
Second row contains a fixed toolbar at the top and a resizable are at the bottom.
Due to rendering differences between browsers, I cannot just enable scrolling for the "content" frame, as this would mean that the entire frame, including the toolbar, would scroll in some browsers, whereas only the resizable portion at the bottom would get a scrollbar in other browsers (which is what I want). The css for controlling the container and toolbarContainer elements is missing from the example below, but this is not relevant right now.
The problem is: Given the sample code below, I do not get an onresize event for the body element if I resize the browser window vertically when using IE7 (IE8 in IE7 compatibility mode, but pure IE7 exhibits the same problem). In all other browsers I have tried, I do get the onresize event and if I resize the browser window horizontally, I also get the event in IE7.
Is there a known problem with IE7 and the onresize event in this context?
Note 1: I am aware that I ought to get rid of the frameset altogether, but this is not an option right now.
Note 2: I have searched for information on this topic, but as the problem only seems to appear in the IE7&frame context, it is unlikely to affect too many developers nowadays.
index.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Resize Test</title>
</head>
<frameset rows="104,*" framespacing="0" frameborder="no">
<frame src="header.htm" name="header" frameborder="0" noresize="noresize" scrolling="no" marginheight="0" marginwidth="0" />
<frame src="content.htm" name="content" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" />
</frameset>
</html>
header.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Header</title>
<style type="text/css" media="all">
body { margin: 0px;
padding: 0px;
width: 100%;
height: 104px;
}
</style>
</head>
<body>
<img alt="" width="699" height="104" border="0" src="header.png" />
</body>
</html>
content.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Content</title>
<script type="text/javascript">
function repositionContainers() {
//document.write('resize');
var divWrapper = document.getElementById('wrapper');
var divContainer = document.getElementById('container');
var wrapWidth = divWrapper.clientWidth;
var wrapHeight = divWrapper.clientHeight - 27;
// (resizing code follows here ...)
}
</script>
<style type="text/css" media="all">
body { background: #ffa;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
</style>
</head>
<body onload = "repositionContainers();" onresize="repositionContainers();">
<div id="wrapper">
<div id="toolbarContainer">
<img alt="" width="212" height="27" border="0" src="toolbar.png" />
</div>
<div id="container">
<h1>Contents goes here ...</h1>
</div>
</div>
</body>
</html>