view this is IE.

how come the yellow background on the <div id="capTop"> and <div id="capBottom"> bottom is showing? I have the height set to 9px its like there is a minimum in IE.


Also notice the text and the pink background showing, would be nice to set right-margin to -10 and have it fixed. So what is the fix?

Code:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
	<title>CSS-P</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
	<style type="text/css">
body,html {
 text-align: center;
 height: 100%;
 margin: 0px 0px;
 padding: 0px 0px;
 width: 100%;
 background-color: cornsilk;
 }
 
#frame {
 width: 765px;
 height: 100%;
 padding: 0px 5px;
 margin-right: auto;
 margin-left: auto;
 margin-top: 0px;
 margin-bottom: 0px;
 text-align: left;
   background-image: url('/images/background.gif');
 background-repeat: repeat-y;
 background-color: #ff0000;
 }
  
#contentcenter {
 width: 765px;
 height: 100%;
 padding: 0px;
 float: left;
 background-color: #ffffff;
 }
 
#contentheader {
 background-color: #00ffff;
 height: 75px;
 }
  
#contentfooter {
 background-color: #00ff00;
 height: 20px;
 }
  
/*main content area*/ 
#capTop {
 margin: 0;
 padding: 0;
 width: 561px;
 height: 9px;
 background: url('cap_content.gif') no-repeat Bottom;
 font-style: normal; 
 background-color: yellow;
}
#capMiddle {
 margin: 0;
 padding: 10px 0px 10px 10px;
 width: 561px;
 height: 300px;
 background: url('cap_middle.gif') repeat-y;
 background-color: pink;
}
#capBottom {
 margin: 0;
 padding: 0;
 width: 561px;
 height: 9px;
 background: url('cap_bottom.gif') no-repeat Top;
 font-style: normal; 
 background-color: yellow;
}
  
	</style>
  </head>
<body>
	<div id="frame">
 <div id="contentcenter">
 
 <div id="contentheader">This is the Header</div>
 <div id="capTop"></div>
 
 <div id="capMiddle">
  testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123
 </div>
 
 <div id="capBottom"></div>
  <div id="contentfooter">This is the footer</div>
  
 </div>
 
 <br style="clear:both;" /><!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->
</div>
  </body>
</html>