Geek asks and answers

Table Width in IE7 / 8

I'm crazy about the fact that my table looks correct in different browsers, only when I think that I got into one, it changes in another. IE7 / 8 and FF are my target browsers.

Can someone please take a look at the code that I just can't figure out what the problem is. The table is generated by javascript, I need to have a fixed width of 220px, the main problem is tfoot, where I have 3 tds for which I have problems with width control.

Here is the relevant piece of 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?

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

+3
source share
3 answers

Try this in your CSS:

table {
    table-layout: fixed;
}
+6
source

: 3px .favouritelinks td CSS, .

td CSS HTML

+1

I had the same layout problem as in IE9 +, but bad in IE 7/8. I found out that "colspan" was a problem when this column is wider than the sum of the other matching columns, rather than colspan on other rows. I indicated a fixed width on all columns except the one I want to adjust with the remaining width. But this did not work on IE 7/8. Thus, I end up breaking the rows on different “tables” to bypass this layout problem.

0
source

More articles:


All Articles