Why are my html buttons moving in I.E? They don't move in Chrome or FF
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.
加载中,请稍侯......
精彩评论