1.11M Members

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

 
0
 

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>
 
0
 

Perhaps I'm not understanding you correctly, but when I load it on to a test page, everything looked correct. It didn't matter which browser I was using. The orangish menu rectangle was flush with the top of the other main box.

 
0
 

Ack, sorry! I forgot to say that it doesn't align correctly when rezising the browser window. If you make the window smaller or bigger in IE6 and IE7, the orange div and the white bottom div remain at the same vertical position as it was when the page was first refreshed, while the rest of the web (the pink div) repositions following the center of the window.

You
This article has been dead for over six months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: