Abs positioning causing later element to appear first!

I have a table that I have absolutely positioned 126px from the top. After that, I have a block of text that has no positioning associated with it. What I expect is my table to appear as positioned and directly following that, my block of text.

However, what happens in IE 6.0 is the block of text appears at the top of the browser above my absolutely positioned table when in the code it comes after the table!

Because the table could vary in height depending on what is in it, I can't absolutely position the block of text.

What am I doing wrong or missing? Here is my code:


<html><head>
<STYLE type="text/css">
body   {margin: 0;
background: #E9E0AA;}
td{width: 50%}
.maintable { position: absolute;
 top: 126px; 
 left: -2px;
 border-style: solid;
 width: 100%}
 
.test   {color: white;
  font-size: 14;
  background-color: #826AA9;
  font-family: arial} 
</style>
</head>
 <table class="maintable">
 <tr>
  <td>Test test</td>
  <td>Test test</td>
 </tr>
 <tr>
  <td>Test test</td>
  <td>Test test</td>
 </tr>
 </table>
<p class="test">Test Test</P></html>

Abs positioning causing later element to appear first!

A beginner's challenge

kriskd

BonRouge

kriskd

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week