Posted by ironcorona on 05/03/06 19:20

Skeeve wrote:
> 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!

This one I'm on top of. Take out the width:500px; from
td#container and add it into the overall table rules. The CSS should
look like:

table {
width:500px;
border-collapse: collapse;}

td#container {
display: block;
position: relative;

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


--
ironcorona

[Back to original message]