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