5

Div not vertically aligned when position:relative in IE6 and IE7

view full story
linux-howto

http://www.daniweb.com – Hello, I have a web layout inside a table that allows it to be both vertically and horizontally aligned. It was working well in all browers, until I needed to make a div with a relative positioning. Now that div does not align vertically in IE6 and IE7. It works in other browers. The reason I needed to make it relative it's because it has to contain a smaller div that should go to the bottom, which has positioning absolute and bottom:0. The DIV that is not vertically aligning has the id="menu" in the example. Any help really appreciated! Here you can see a demo: http://www.lloparts.com/tests/testDivIE6.html And this is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <head> <style type="text/css"> html, body, #container {       height:100%;       border: none; } body {         font-family:Arial, sans-serif;         font-size:13px;         background-color:#c8c8c8; } table {         border-collapse: collapse; } #container {         margin: 0 auto;         text-align: left; } #interior {         display:block;         width:907px;         height:552px;         background-color:#FFFFFF; } #leftColumn {         background-color:#ffeeff;         width:197px;         height:552px;         padding-right:16px;         vertical-align:top; } #menu {         background-color:#FFCC99;         position:relative;         width:160px;         height:500px; } #bottom {         background-color:#FFFFFF;         position:absolute;         bottom:0;         width:100px;         height:100px; } </style> </head> <body> <table id="container">   <tr>     <td>       <table id="interior" border="0" cellpadding="0" cellspacing="0">         <tr>           <td id="leftColumn">             <div id="menu">               <div id="bottom">               </div>             </div>           </td>         </tr>       </table>     </td>   </tr> </table> </body> </html> (General)