Featured post
javascript - Why are my html buttons moving in I.E? They don't move in Chrome or FF -
we using ajax send data our database. i've added feedback user including spinner (animated .gif) spins during request, , pass/fail text displayed user when request 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 user clicks submit button spinner spins until ajax callback returned. @ point, buttons not shift. once receive callback display text "successful!" (displayed in span
using jquery $(el).html("successful!");
), causes buttons shift right. message fades out (also using jquery), , once button fades completely, buttons shift original position.
if hardcode "successful!" inside span, buttons shifted, know has text (remember doesn't shift when spinner displayed [which uses img
tag]).
it doesn't matter how wide set first td
width.
is there way can keep these buttons shifting in ie?
try adding border-collapse:collapse;
style
definition of table
, reduce size of 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>
- Get link
- X
- Other Apps
Comments
Post a Comment