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:

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
  • 262 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Altairzq

Dani AI

Generated

— this is a classic IE6/7 repaint/reflow quirk; ’s observation that the page looks fine on first load but breaks on resize is the key symptom.

Brief explanation: IE6/7 sometimes fails to repaint positioned elements inside table cells when the outer table is re-centered, especially if a table element has been forced into a non-table display or the positioned ancestor does not have IE’s internal “hasLayout.” That leaves the orange box and its absolute child stuck at their original coordinates while the rest of the table recenters.

Practical fixes (in order of preference):

  • Remove any rule that changes a real table to display:block. Let the table remain a table so the browser computes layout/reflow normally.
  • Ensure the positioned ancestor gets hasLayout in IE6/7. Add a tiny helper class and apply it to the TD that contains the menu (or to the positioned ancestor):
/* apply on the TD or on the positioned ancestor in IE6/7 */
.ieHasLayout { zoom: 1; }
  • If a pure-CSS change isn’t possible, force a repaint on resize (IE-only JS fallback):
window.attachEvent('onresize', function(){
  var m = document.getElementById('menu');
  if (m) { m.style.zoom = (m.style.zoom === '1') ? '' : '1'; }
});

Notes and cautions: zoom:1 is an old IE-only trick to trigger hasLayout and is safe as a targeted fallback, but it’s not standards-based. Prefer removing the display:block on the table first; add the hasLayout fix only if the problem persists. Long term, replacing table-based centering with modern CSS (flexbox or table-cell) eliminates these legacy IE hacks.

Recommended Answers

All 2 Replies

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.