Search code examples
cssfirefoxhtml-tableinternet-explorer-7

CSS table td width and right align not working

This is my table in FireFox. Note that the center column, with the user name, is wide and the edit link is right aligned.

enter image description here

This is IE7 and IE8:

enter image description here

Here’s is the html:

    <fieldset >
    <legend>Account Information</legend>
    <table class="display-table">
        <tr>
            <td class="display-label">
                <label for="UserName">Username</label>
            </td>
            <td class="display-field-middle">
                user7
            </td>
            <td class="display-field-right">
                <a class="" href="/test1/Account/ChangeUserName">edit</a>


            </td>
        </tr>
        <tr>
            <td class="display-label">
                <label for="Password">Password</label>
            </td>
            <td class="display-field-middle">
                *********
            </td>
            <td class="display-field-right">
                <a class="" href="/test1/Account/ChangePassword">edit</a>
            </td>
        </tr>
    </table>
    </fieldset>

This is the FireBug display of the inherited styles:

enter image description here

Here is the style sheet:

.display-table
{
    border-collapse:collapse;
    width: 400px;
}

.display-label
{   
    white-space: nowrap;
    vertical-align:middle;
    width: 120px;
}

.display-field-middle
{
    width: 200px;
    background-color: #dfeffc;
    vertical-align:middle;
    height: 30px;
    padding-left: 5px;
    padding-right: 5px;
}


.display-field-right
{
    width: 50px;
    background-color: #dfeffc;
    vertical-align:middle;
    height: 30px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: right;
}

Why isn’t the middle column expanding and why aren’t the edit links right aligned? I’ve tried everything!

Solution

  • It turns out that I was testing incorrectly and the page was working all along. :(