CSS Hints for Internet Explorer 5
Pages: 1, 2, 3, 4

Tables and absolutely positioned elements

Bug: When placing an absolutely positioned element inside a table with an undefined (and hence static) position, Explorer always reacts as if the table has a position: relative. Its coordinates are relative to the upper left corner of the table, not the upper left corner of the page. Even explicitly giving the table a position: static doesn't help.

Example: In the screenshots below, the container element is a table, and a testdiv element is inside one of the <TD>s.

<table class="container" border=2>
   <tr>
      <td>
         Blah!
         <div class="testdiv">
            This is the test DIV in the table
         </div>
      </td>
      <td>
         Blah!
      </td>
   </tr>
</table>

.container {
   position: static;
   margin-top: 50px;
   border: 1px solid #000000;
}

.testdiv {
   position: absolute;
   top: 50px;
   left: 50px;
   border: 1px solid #000000;
   padding: 10px;
}

The testdiv should be positioned relative to the browser window, since its container, the <TABLE>, has position: static:

Opera 6 gets it right. It positions the testdiv relative to the entire browser window and pays no attention to the <TABLE>:

Explorer, however, positions the testdiv relative to the <TABLE>, as if the table has position: relative. It also shrinks the <DIV> so it will (more or less) fit inside the table:

(Curiously, Mozilla has the opposite bug: It never places the absolute element relative to the table, even when the table has a position: relative.)

Workaround: None. Don't place absolutely positioned elements inside tables.

Margins

Hidden margins

Bug: When placing an absolutely positioned element at the right or bottom edge of the browser window, a mysterious margin crops up that causes unwanted scrollbars.

Example:

div.container {
   height: 150px;
   width: 200px;
   position: absolute;
   right: 0px;
   border: 1px solid #000000;
   background-color: #ffffff;
}

The <DIV> appears flush against the right border. Since there is no other content on the page, no scrollbars are necessary. Mozilla positions it correctly:

Explorer also gets it right, but then generates an unnecessary right page margin, causing an unwanted horizontal scrollbar:

The problem is an extra 15px right margin of the <DIV>, which is exactly the space a scrollbar takes up. Still, it's not easy to understand which scrollbar should be placed in this margin. The relation (if any) of this bug to incorrect treatment of scrollbar space is not clear.

Workaround: Give the element a right of 15px and a negative right margin of 15 pixels:

div.container {
   height: 150px;
   width: 200px;
   position: absolute;
   right: 15px;
   margin-right: -15px;
   border: 1px solid #000000;
   background-color: #ffffff;
}

Which results in:

The other browsers react in the same way as Explorer, so this workaround gives few cross-browser compatibility problems (except for Mozilla on Windows 2000, which may sometimes show a slight margin of 1px).

The same bug can appear when positioning an element at the bottom of the browser window. In that case, margin-bottom should be set to -15px.