ASP.NET LinkButton not rendered correctly in IE7

Question

We have an issue (one of many) with a customer who switched to MS IE 7 just a few weeks ago (yes, yes, I know....... don't ask.....)

In our ASP.NET app, we have a series of <asp:LinkButton> controls for navigation inside a HTML table, each link button on a separate row. The link button is inside a <td width="200"> tag. Each <asp:LinkButton> has a CSS class assigned which defines:

.stdLinkButton
{
    background-color: teal;
    color: Black;
    border: navy 1px solid;
    text-decoration: none;
    margin-right: 10px;
    padding: 2px;
    height: 18px;
    overflow: visible;
}

In MS IE 6, the buttons nicely filled up the whole width of the <td> and lined up - we had five or six rows of link buttons, all same width, all centered in 200 pixel wide buttons.

But in MS IE 7, the link buttons are being rendered as standard and are only just as wide as needed to contain the text label on them. So now we have five or six rows, and each link button is rendered as a button with the minimum width needed to contain the text for the button. Looks awful....

I already tried adding a "width:200px" to the CSS class, but that doesn't do any good, really :-(

Is there any easy trick / workaround to get MS IE 7 to render those <asp:LinkButton> elements nicely again, to a specified, fixed width?

If ever possible, we'd like to keep specifying the width in the CSS - I would prefer not to have to go to each and every <asp:LinkButton> instance and set the ASP.NET property "Width" to 200px (that seems to work, btw - the link buttons are nicely set to the specified, fixed width).

Marc

Answer 1

Adding display: block to the CSS rule should do the trick.