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 over 7 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 over 7 years ago
  • Found the issue.It was the display:block property that was causing the problem. radhakrishna over 7 years ago
  • Cool! Glad you got it fixed :) o.k.w over 7 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 over 7 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 over 7 years ago