Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






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

Correct Rendering Screen Shot

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:

Incorrect Rendering Screen Shot

(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:

Correct Rendering Screen Shot

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

Correct Rendering Screen Shot with Extra Margin

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:

Correct Rendering Screen Shot

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.

Pages: 1, 2, 3, 4

Next Pagearrow