hi there!!!
I think I've found a somehow 'bug' in firefox css2 implementation.
I just want to put an image which 'top' matches with the 'bottom' of a
table cell.
Following css2.1 specifications, I figured it out this way:
- absolute positioning is always relative to the container block.
- the 'container block' is the first parent block that has a
'position:absolute' OR 'position:relative' specified.
- so I make a td 'position:relative;', in order to make an
image-containig div inside that td with 'position:absolute;'. Then i
only need to specify that 'top:100%' and voila!!, I should get the
absolute positioned div 100% of the cell height below the cell top
(which is his first parent with 'position:relative;').
This works good in IE, but in firefox, it does it relative to a higher
positioned 'div' element which also with 'position:relative;', and is
the parent of the table. It's just like putting 'position:relative' in
a table cell doesn't work.
my code is somehow like this:
<div id="tablelist">
<table>
<tr>
<td>some text ...<div class="adorno"><img></div></td>
<td>some text ...<div class="adorno"><img></div></td>
</tr>
....
</table>
</div>
and the style:
div#tablelist table{
border:0px;margin:0px;padding:0px;table-layout:auto;position:relative;}
div#tablelist { border:0px;margin:0px;padding:0px; }
div#tablelist td {
width:277px;
position:relative;
border-left-width:1px;
border-left-style:solid;
border-left-color:#afb3bc;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:blue;
padding-bottom:5px;
}
div.adorno{
position:absolute;
left:-1px;
top:100%;
}
_______________________________________________
mozilla-layout mailing list
[email protected]
http://mail.mozilla.org/listinfo/mozilla-layout
