views:

1462

answers:

5

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <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>
A: 

I am having same problem and do not know the solution.

Jetha Lal
A: 

onresize event do not fire with "DOCTYPE....." command. try after removing first line i.e. "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;" from content.htm.

Regards, Komail Noori

www.KomailNoori.com

Komail Noori
Removing the DOCTYPE line would throw the page into quirks mode, which is unacceptable.The problem is not how to get this sample to work just in IE7, but to get a more complex page to work within the restrictions of this sample, including the DOCTYPE.The sample needs to work across IE6, IE7, IE8, and FF3.0/3.5.
Joergen Bech
A: 

I'm seeing this too... and if makes you feel any better, i'm not using framesets:

The onResize event fires as expected on FF, but not on IE(7). Wazzup?

ss ulrey
I take it back... my vis studio was caching the old version of my js... Once i flushed it, i see that IE7 is thankfully executing my onResize... gl!
ss ulrey
A: 

IE7 with doctype needs:

html, body { height: 100% }

Martin Hunt
A: 

thanks so much : the 100% height style worked perfect for me !!!

I am using frames (sick sad world...) and the onresize only fired when reducing the window height and not when getting bigger. This only in IE6, FF & IE8 were ok (dunno for IE7).

I was using onresize event to keep my footer at the bottom of window when contents were too short to fill it. Was working fine with the onload event and only half working with onresize.

Adding the CSS rule to the page where was the event fixed it !

thx again.

David