homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

relative positioning in <td>

10+ Year Member

Msg#: 3757181 posted 4:55 am on Oct 2, 2008 (gmt 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]



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

Msg#: 3757181 posted 8:20 am on Oct 2, 2008 (gmt 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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved