I have a simple set of frames with two vertical frames, i.e. two lines:
The first line contains a fixed header.
The second line contains a fixed toolbar at the top, and the size from the bottom to the bottom.
Due to rendering differences between browsers, I can't just enable scrolling for the “content” frame, as this would mean that the entire frame, including the toolbar, would scroll in some browsers, while only the resized portion at the bottom would get a scroll bar in other browsers (this is what I want). Css for managing the container and toolbar elements is missing in the example below, but this is not relevant right now.
Problem: given the code sample below, I don't get the onresize event for the body element if I resize the browser window vertically when using IE7 (IE8 in IE7 compatibility mode, but pure IE7 shows the same problem). In all other browsers I tried, I get the onresize event, and if I resize the browser window horizontally, I also get the event in IE7.
Is there a known issue with IE7 and the onresize event in this context?
Note 1: I know that I must completely get rid of the frame set, but now this is not an option.
Note 2: I was looking for information on this topic, but since the problem seems to only appear in the context of IE7 and frame, this is unlikely to affect too many developers at the moment.
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() {
var divWrapper = document.getElementById('wrapper');
var divContainer = document.getElementById('container');
var wrapWidth = divWrapper.clientWidth;
var wrapHeight = divWrapper.clientHeight - 27;
}
</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>