|
|
Posted by Skeeve on 05/03/06 19:03
So, I thought I was out of the woods, but the example I created (for
simplicity) hid an issue. That td that now has 'display: block;' as an
attribute is actually spanning columns, and followed by other rows with
multiple TDs.
When display: block; is added, it pushes (only in FF) all of the
remaining columns to the right, seemingly negating the colspan table
attribute. So, I added display: inherit; (tried others too) to the
following TR tags, and it does move the columns back into place, but
they don't match up anymore.
html snippet:
__________
<table>
<tr>
<td colspan="5" id="container">center
<div id="topleft">topleft</div>
<div id="topright">topright</div>
<div id="bottomleft">bottomleft</div>
<div id="bottomright">bottomright</div>
</td>
</tr>
<tr class="rows">
<td class="data">Column 1</td>
<td class="data">Column 2</td>
<td class="data">Column 3</td>
<td class="data">Column 4</td>
<td class="data">Column 5</td>
</tr>
</table>
____________
css:
___________
table {
border-collapse: collapse;}
td#container {
display: block;
position: relative;
width: 500px;
border: 1px #000000 solid;
height: 70px;
text-align: center;
vertical-align: middle;}
#topleft {
position: absolute;
top: 0px;
left: 0px;
}
#topright {
position: absolute;
top: 0px;
right: 0px;
}
#bottomleft {
position: absolute;
bottom: 0px;
left: 0px;
}
#bottomright {
position: absolute;
bottom: 0px;
right: 0px;
}
tr.rows {
display: inherit;}
td.data {width: 100px;
border-top: 1px #636262 solid;
border-left: 1px #636262 solid;
border-right: 1px #636262 solid;
border-bottom: 0px;}
_____________________
Is there a good solution to this one? Thanks again!
Navigation:
[Reply to this message]
|