Why are my html buttons moving in I.E? They don't move in Chrome or FF_问答_开发者

Why are my html buttons moving in I.E? They don't move in Chrome or FF

开发者 https://www.devze.com 2023-02-01 00:42 出处：网络

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 us

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?

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>

Add a DOCTYPE to your file, e.g.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">    </script>

<body>
    <table style="width:350px;">
        <tr>
            <td style="width:100px; min-width:100px;" align="right">
                <span id="el"></span>
            </td>
            <td style="width:150px">
            <input type="button" value="Submit" onclick="$('#el').html('Success');"/>
            <input type="button" value="Cancel" onclick="cancel();"/>
           </td>
           <td style="width:100px"></td>
        </tr>
     </table>
</body>
</html>

I had a similar issue and it was because of IE handling the tag differently from other browsers.