The table has 3 columns with varying widths. In IE8 It works fine, but in FF3 & Google Chrome the columns are collapsing. What's the fix?

Markup:

<table class="table-header" width="100%">
                <tr>
                    <td style="width:50%">
                        Title
                    </td>
                    <td style="width:25%">
                        Passing Percent
                    </td>
                    <td style="width:25%">
                        Details
                    </td>
                </tr>
            </table>

Images below: alt text

IE8: FF3: http://imgur.com/7C1R1.png

1 answer

o.k.w 2355
1
point
This was chosen as the best answer

The problem might be with the class "table-header". Can you post the style class definition here? I've tried you codes, looks fine in IE8, Chrome and FF3

Answered about 8 years ago by o.k.w
  • css.I commented out the background-image url .table-header { /*background-image: url('<%=ResolveUrl("~/img/HeaderChromeBlack.jpg") %>'); */ background-position:center; background-repeat:repeat-x; background-color:#1d1d1d; font-size: 15px; padding: 5px; color: #ffffff text-decoration:none; color:#ffffff; display:block; text-align:left; font:121%; font-weight:bold; border-bottom:3px solid rgb(40,40,40); margin-bottom:4px; height:27px; } radhakrishna about 8 years ago
  • Found the issue.It was the display:block property that was causing the problem. radhakrishna about 8 years ago
  • Cool! Glad you got it fixed :) o.k.w about 8 years ago
  • Notice Firefox and Chrome performed the same. I'd bet Safari and Opera would, too. Further proof that IE is the worst browser on the planet. Never, ever trust IE to do anything right. Rob about 8 years ago
  • I always design and test using Firefox. Once the initial design is completed I will test in other browsers to make sure all works as expected. Finally, I will test in IE (notice I don't consider IE as a browser :), then code the IE specific stuff. TailorDMI about 8 years ago