Question

I’m getting crazy with getting my table look right on different browsers, just when I think I got in one it changes in the other. IE7/8 and Firefox are my target browsers.

Could someone please have a look at the code I just can’t figure out what’s the problem.
Table is generated by Javascript, I need it have fixed width of 220px, the main problem is tfoot where I have 3 tds for which I’m having problems controlling width.

Here is the relevant portion of the code:

<table class="favouritelinks"  cellspacing="0" cellpadding="0" width="220" >

<thead>
    <tr><td colspan="3">Your Favourite Links</td></tr>
</thead>
<tbody id="tulemused" ></tbody>


    <tr>
        <td width="50">Name</td><td><input type="text" id="key" name="key" value="" /></td>
        <td rowspan="2"><a href="javascript:insert_value()"><div class="addimg"></div></a></td>
    </tr>
    <tr>
        <td width="50">URL</td><td><input type="text" id="val" name="val" value=""  /></td>

    </tr>


</table>

and css:

.favouritelinks td{
                height: 20px;
                padding: 3px;

                border-bottom: 1px solid white;
                word-break: break-all;


            }
            .favouritelinks td a{
                color: white;
                text-decoration: none;


            }
            thead{
                background: url(img/title5.png) no-repeat;
                color: #444;
                font: bold 16px Helvetica;
                text-shadow: 0 1px 0 #FFF;
                text-align: center;
                width: 220px;
                height: 36px;


            }
            thead tr {
                height: 36px;

            }
            .container{
                width: 220px;
                margin-top: 105px;
                margin-left: 10px;


            }
            .delimg {

                background: url(img/details_close.png) no-repeat;
                width: 20px;
                height: 20px;
                float: right;
            }
            .addimg {
                background: url(img/details_open.png) no-repeat;
                width: 20px;
                height: 20px;
                float: right;
            }
            .urls {
                display: none;

            }

What am I doing wrong?

Picture http://imageshack.us/photo/my-images/38/56751263.jpg/

Answer 1

Try this in your CSS:

table {
    table-layout: fixed;
}