Member Avatar for Altairzq

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>
Edited by Altairzq because: n/a
  • 2 Contributors
  • 2 Replies
  • 244 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Altairzq
Member Avatar for alipica

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.

Member Avatar for Altairzq

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.

Edited by Altairzq because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.