homepage Welcome to WebmasterWorld Guest from 54.205.188.59
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
relative positioning in <td>
yawnmoth




msg:3757183
 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?

Thanks!

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

<body>
<table>
<tr>
<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>
</body>
</html>

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

 

SuzyUK




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