html - CSS postion looks good in IE9, cut off in IE8 -

hey hoping tell me need change in order seeing in ie9 same when viewing in ie8.

this looks in ie9:

and looks in ie8:

the css code 2 divs are:

body { text-align:left; font-size:13px; font-family:arial, helvetica, sans-serif; line-height:18px; color:#6a7e8a; background:#fff; margin:0; padding:0; }  #logo span { color:#fff; padding-left:50px; text-transform:none; font-family:arial, sans-serif; }  #logo span.header1 { font-size:0.4em; display:block; top:0; line-height:0.8em; }  .logoheader h1 { text-decoration:none !important; }  .logoheader { top:22px; left:0; text-decoration:none !important; border:none !important; position:absolute; color:#fff; z-index:10; }  .logoheader h1 { border:none !important; }   .logoheader2 {     top:5px;     left:398px;     text-decoration:none !important;     border:none !important;     position:absolute;     color:#fff;     z-index:10;     height: 144px;     width: 521px; }    #line {     position:absolute;     right:20px;     top:5em;     max-width:38em;     padding:5px 0 2px 2px; }  .main #maincolumn {     padding-bottom:0 !important; }  .item-page {     padding-top:25px; }  .contact h3 {     font-size:30px;     color:#144659; }  img {     border:none; }  p {     margin:8px 0; }  em {     font-weight:700; }  #all {     width:100%;     height:100%;     overflow:auto !important;     left:0;     top:0;     min-width:1080px;     margin:0 auto; }  body,html {     overflow:auto !important; }  .main .all_bg {     height:100%;     z-index:1300; }  #header form .button {     font-weight:700;     cursor:pointer;     text-align:center;     text-transform:uppercase;     margin:0; }  .main #header {     position:absolute;     top:50%;     margin-top:-61px;     left: -3px; }  .main #head {     background:none; }  /* line!!! */ #header {     width:100% !important;     height:150px;     text-align:left;     background-color:#fff;     z-index:1300;     position:relative;     margin:0 auto 23px;     border: 1px solid #ccc;     filter:alpha(opacity=85);     opacity: 0.85;     -moz-opacity:0.85; }  /* center stuff */ #head {     height:150px;     text-align:left;     position:relative;     width:920px;     margin:0 auto; }  #header > #head > .main_menu > ul.menu {     display:block;     text-align:left;     list-style-type:none;     position:absolute;     top:3px;     right:0;     z-index:1300;     padding:0; }  #header .main_menu ul.menu > li {     list-style:none;     border:none;     float:left;     position:relative;     margin:0;     padding:0 0 0 1px; }  #header .main_menu ul.menu > li:first-child {     background:none !important; }  #header .main_menu { position:relative; float:left; overflow:hidden; font-size:12px; text-transform:uppercase; text-decoration:none; color:#fff; width:109px; text-align:center; background:#0af; padding:40px 0 33px; }  #header .main_menu a:hover,#header .main_menu ul.menu > li.actives > a,#header .main_menu ul.menu > li.current > { background:#0a2034; }  #header .main_menu ul.menu ul { display:none; top:91px; position:absolute; left:0; background:#0af; width:112px; padding:0; }  #header .main_menu ul.menu ul ul { left:112px; top:0; background:#0af !important; padding:0; }  #header .main_menu ul.menu ul li,#header .main_menu ul.menu ul ul li { display:block; height:30px; float:none !important; position:relative !important; line-height:30px; width:106px !important; border-bottom:1px solid #0ca4f1; }  #header .main_menu ul.menu ul li.active,#header .main_menu ul.menu ul li:hover { background-position:0 0 !important; }  .main #content { display:none; margin:0 auto; padding:0 0 17px; }  #content { width:960px; position:relative; overflow:hidden; margin:0 auto 50px; }  .clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; }  .clearfix:after { clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0; }  .clearfix { display:block; }  * html .clearfix { height:1%; }  h1#logo { margin:0 !important; padding:0 !important; }  #bg { position:fixed; z-index:1; overflow:hidden; }  #bgimg { display:none; }  #preloader { position:relative; z-index:1350; width:32px; top:50%; margin:-32px auto; }  *,fieldset { margin:0; padding:0; }  #header .main_menu ul.menu ul li a,#header .main_menu ul.menu ul ul li { display:block; background:none; text-align:center; font-weight:400 !important; line-height:30px; height:30px; font-size:10px; width:112px !important; color:#fff; float:none !important; padding:0 !important; }  #header .main_menu ul.menu ul li a:hover,#header ul.menu ul li.actives a,#header ul.menu ul li.current a,#header .main_menu ul.menu ul ul li a:hover { color:#fff; font-weight:400 !important; background:#0a2034; }   button.greyb {   background-color: #bfbfbe;   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c6c6c6), color-stop(100%, #a7a7a7));   background-image: -webkit-linear-gradient(top, #c8c8c8, #a6a6a6);   background-image: -moz-linear-gradient(top, #c8c8c8, #a6a6a6);   background-image: -ms-linear-gradient(top, #c8c8c8, #a6a6a6);   background-image: -o-linear-gradient(top, #c8c8c8, #a6a6a6);   background-image: linear-gradient(top, #c8c8c8, #a6a6a6);   border: 1px solid #a6a6a6;   border-bottom: 1px solid #969795;   -webkit-border-radius: 3px;   -moz-border-radius: 3px;   -ms-border-radius: 3px;   -o-border-radius: 3px;   border-radius: 3px;   -webkit-box-shadow: inset 0 1px 0 0 #cbcbcb;   -moz-box-shadow: inset 0 1px 0 0 #cbcbcb;   box-shadow: inset 0 1px 0 0 #cbcbcb;   color: #fff;   font: bold 11px "lucida grande", "lucida sans unicode", "lucida sans", geneva, verdana, sans-serif;   line-height: 1;   padding: 7px 0 8px 0;   text-align: center;   text-shadow: 0 -1px 0 #8b8b8a;   width: 100px;    height: 30px;   }   button.greyb:hover {     background-color: #b4b5b4;     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b4b4b3), color-stop(100%, #989998));     background-image: -webkit-linear-gradient(top, #b3b3b3, #989898);     background-image: -moz-linear-gradient(top, #b3b3b3, #989898);     background-image: -ms-linear-gradient(top, #b3b3b3, #989898);     background-image: -o-linear-gradient(top, #b3b3b3, #989898);     background-image: linear-gradient(top, #b3b3b3, #989898);     -webkit-box-shadow: inset 0 1px 0 0 #c1c1c0;     -moz-box-shadow: inset 0 1px 0 0 #c1c1c0;     box-shadow: inset 0 1px 0 0 #c1c1c0;     cursor: pointer; }   button.greyb:active {     border: 1px solid #979796;     border-bottom: 1px solid #898a88;     -webkit-box-shadow: inset 0 0 8px 4px #8b8b8b, 0 1px 0 0 #eeeeee;     -moz-box-shadow: inset 0 0 8px 4px #8b8b8b, 0 1px 0 0 #eeeeee;     box-shadow: inset 0 0 8px 4px #8b8b8b, 0 1px 0 0 #eeeeee; }  .textbox {     width: 200px;     height: 40px;     font-family: arial, helvetica, sans-serif;     font-size: 30px;     font-weight: bold;     border: 1px solid #999;     position:absolute;     left: 1px;     top: 48px;     border: 3px solid #39a0c7;     border-radius:15px;     -moz-border-radius:15px;     box-shadow: 2px 5px 5px #1b627b; }  .textboxvin {     width: 110px;     height: 40px;     font-family: arial, helvetica, sans-serif;     font-size: 30px;     font-weight: bold;     border: 1px solid #999;     position:absolute;     left: 90px;     top: 48px;     border: 3px solid #39a0c7;     border-radius:15px;     -moz-border-radius:15px;     box-shadow: 2px 5px 5px #1b627b; }  /* label 1 (left) pic */  .imglabelpost  {     float: left;     margin: 0px 0px 0px 0px;     position: absolute;     top: -25px;     z-index: 1500; }  .imglabelpost img, img.thelblbutton {     float: left;     background-color: #ccc;     border: 1px solid #666;     padding: 4px;     z-index: 1600; }  .imglabelpost .lblcaption  {     background: url('../img/banner.png') no-repeat left bottom;     bottom: 30px;     color: #fff;     left: -23px;     padding: 8px 10px 18px 13px;     position: absolute;     z-index: 1700; }   /* label 2 (right) pic */  .imglabelpost2 {     float: right;     margin: 0px 0px 0px 0px;     position: absolute;     top: -25px;     left: 230px;     z-index: 1500; }  /* image still floats , looks nice if js turned off */ .imglabelpost2 img, img.thelblbutton2 {     float: left;     background-color: #ccc;     border: 1px solid #666;     padding: 4px;     z-index: 1600; }  .imglabelpost2 .lblcaption2  {     background: url('../img/banner.png') no-repeat left bottom;     bottom: 30px;     color: #fff;     left: -23px;     padding: 8px 10px 18px 13px;     position: absolute;     z-index: 1700; } 

html code

<div id="header">     <div id="head">         <div class="logoheader">             <h1 id="logo">                 <img src="img/cssmainlogo.png" alt="" height="99" width="389">             </h1>         </div><!-- end logoheader -->         <div class="main_menu">             <div class="logoheader2" align="center"><br>                 <br>                 <div id="thecontent">                     <div class="imglabelpost">                         <div id="printabledrv">                             <img src="asppages/pfs.asp?photoid=31" title="drv" class="thelblbutton" height="210" width="210">                         </div>                         <div class="lblcaption">                             <button class="greyb" name="drvprint" id="drvprint">                                 <span style="color: rgb(0, 0, 0); font-size:12px; font-family:arial, helvetica, sans-serif;">print drv label</span>                             </button>                         </div>                     </div>                     <div class="imglabelpost2">                         <div id="printablepas">                             <img src="asppages/pfs.asp?photoid=32" title="pas" class="thelblbutton2" height="210" width="210">                         </div>                         <div class="lblcaption2">                             <button class="greyb" name="pasprint" id="pasprint">                                 <span style="color: rgb(0, 0, 0); font-size:12px; font-family:arial, helvetica, sans-serif;">print pas label</span>                             </button>                         </div>                     </div><!-- end imglabelpost2-->                 </div><!-- end thecontent -->             </div><!-- end logoheader -->         </div><!--end main menu-->     </div><!--end head--> </div><!--end header--> 

any great!

david

there possibilities coming problem:

1) make container of cut off elements overflow: auto;

2) maybe container missing needed information "haslayout" problem... simpy fix giving container zoom: 1;

3) container has fixed height (by margin, paddings or height example) , overflow: hidden; should take out overflow hidden then.