JQuery Splitter IE7 issue

JQuery Splitter IE7 issue

Hi Guys

I have just put the JQuery splitter plugin into a simple page and am having some issues with IE7 and the default div sizes.

The setup i want is to have two panels (divs) that will fill the browser window and have the splitter between the two. This works perfectly in FF but when loading in IE7 the two panels are sized to have the content completely visible rather than only sized to 50% of the browser window. this problem is removed though when the splitter bar is dragged up.

The code i have is as follows:

//HTML
   <div id="container">
   
      <div id="topGrid">
         //lots of content       
      </div>
      
      
      <div id="bottomGrid">
         //lots of content         
      </div>
   </div>

//CSS
      html, body
      {
         height: 100%;
         margin: 0 0 0 0;
         padding: 0 0 0 0;
      }
      
      #container
      {
         height: 100%;
         
         
      }
      
      #topGrid
      {
         background-color: red;
         overflow: auto;
         height: 50%;
      }
      
      
      #bottomGrid
      {
         background-color: blue;
         overflow: auto;
         height: 50%;
         
         
         
      }
   /*
* Splitter bar style; the .active class is added when the
* mouse is over the splitter or the splitter is focused
* via the keyboard taborder or an accessKey.
*/
#container .hsplitbar {
   height: 6px;
   background: #cca url(img/hgrabber.gif) no-repeat center;
   /* No margin, border, or padding allowed */
}
#container .hsplitbar.active, #MySplitter .hsplitbar:hover {
   background: #e88 url(img/hgrabber.gif) no-repeat center;
}


//JS
      $().ready(function() {
         $("#container").splitter({
            type: "h",
            sizeTop: true,   /* use height set in stylesheet */
            accessKey: "P"
         });
               
      });


Any thoughts on why this would be happening are appreciated!

Cheers
Stoot