Home/ Questions/Q 7809453
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T03:26:34+00:00

When using the JQuery UI .button function to style a link item, the position

  • 0

When using the JQuery UI .button function to style a link item, the position of link “button” is shifted upwards when viewed in any browser other than Chrome and Safari. This is readily apparent in FireFox and IE, even when going to the JQuery demo page at http://jqueryui.com/demos/button.

I am aware that this is a known issue as listed in the JQuery bugs, but it doesn’t currently show a resolution.

Has anyone found a viable workaround (either via JQuery or CSS) to mitigate this issue so that the “buttons” line up properly in all browsers? I feel that this is an important issue as I have many forms that have a Submit button and Cancel link right next to each other.

  <input type="submit" value="Submit" class="button"/>
  <a class="button" href="/Home">Cancel</a>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Hmm I wasn’t aware of this bug but it is indeed there when I tried it in firefox. Since this seems to be a vertical align issue, one way to solve it would be to put the anchor in a parent element with display:table and assign display:table-cell to the anchor. This should center the anchor within the parent as a table cell’s content would. I modified the css in firefox and this fixed the problem on the jquery ui demo page:

    enter image description here

    Note that this won’t work in IE7 because it doesn’t support display:table-cell. But should work in IE8+ and firefox.

    • 0