Question

We are using AJAX to send data to our database. I’ve added some feedback for the user including a spinner (animated .gif) that spins during the request, and Pass/Fail text that is displayed to the user when the request is complete.

HTML:

<center>
    <table style="width:350px;">
        <tr>
            <td style="width:100px; min-width:100px;" align="right">
                <span id="spinner-and-text-displayed-here"></span>
            </td>
            <td style="width:150px">
                <input type="button" value="Submit" onclick="submit();"/>
                <input type="button" value="Cancel" onclick="cancel();"/>
            </td>
            <td style="width:100px"></td>
        </tr>
    </table>
</center>  

When the user clicks the submit button the spinner spins until the ajax callback is returned. At this point, the buttons do NOT shift. Once I receive the callback I display the text “Successful!” (displayed in the span using jQuery $(el).html("Successful!");), which causes the buttons to shift right. That message fades out (also using jquery), and once the button fades completely, the buttons shift back to their original position.

If I hardcode “Successful!” inside the span, the buttons are shifted, so I know it has something to do with the text (remember it doesn’t shift when the spinner is displayed [which uses the img tag]).

It doesn’t matter how wide i set the first td width.

Is there a way I can keep these buttons from shifting in IE?

Answer 1

Try adding border-collapse:collapse; to the style definition of the table and reduce the size of the middle cell.

<center>
    <table style="width:350px;border-collapse:collapse;">
        <tr>
            <td style="width:100px; min-width:100px;" align="right">
                <span id="spinner-and-text-displayed-here"></span>
            </td>
            <td style="width:145px">
                <input type="button" value="Submit" onclick="submit();"/>
                <input type="button" value="Cancel" onclick="cancel();"/>
            </td>
            <td style="width:100px"></td>
        </tr>
    </table>
</center>