Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

relative positioning in <td>

4:55 am on Oct 2, 2008 (gmt 0)

New User

10+ Year Member

joined:Sept 7, 2003
votes: 0

In Internet Explorer, the "hello, world!" text is on top on the red
box is on the bottom. In Firefox, the "hello, world!" text is on top
and the red box is in the middle.

Internet Explorer's rendition is the preferred rendition. Any idea as
to how to make Firefox's rendition look more like Internet Explorer's?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<title>td positioning</title>

<td width="100" height="1000" style="background: #000; position: relative; vertical-align: top; color: #fff">hello, world!<div style="background: #f00; position: absolute; bottom: 0; left: 0; width: 100px; height: 100px"></div></td></tr></table>

[edited by: SuzyUK at 7:54 am (utc) on Oct. 2, 2008]
[edit reason] URI removed per TOS, code added [/edit]

8:20 am on Oct 2, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
votes: 0

CSS2.1: 9.3.1 Choosing a positioning scheme: 'position' property [w3.org]

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

because every other browser other than IE uses the table-* properties for the display of their tables, this will always be a grey area, positoning inside table cells is not recommended.

However if this is the only bit you have to do and you do actually know the dimensions of the table cell you could simply put a div inside the table with width: 100px; height: 1000px; and relatively position that, before AP'ing the bottom div.

You can also change the display property for the table cell but that will have knock on effects as part of the larger table