"shake" effect not working well on inline elements

"shake" effect not working well on inline elements

Hi,

I'm sure this is a question that has been brought up before, but I'm not able to find the keywords to bring those posts up.

When I try to "shake" an inline <a> element, the <a> gets dumped down to the next line, and the words are broken up. It's almost like the width of the parent <div> is too small or something.

I realize jQueryUI changes some CSS to allow it to shake the element - but is there anything I can do to force it to shake in place?

I'm using FF 3.6.

HTML
  1. <form method = "post" action = "/path/to/page/">
  2.         <div>
  3.             Name: <input type = "text" name = "name" id = "category-name"/>
  4.              <a class = "button" id = "new-category-create">
  5.                         <img src = "/path/to/image.png" alt = "Create" />Create category</a>
  6.                         <input type = "submit" class = "hidden" name = "n_c_s" id = "n-c-s"/>
  7.         </div>
  8.     </form>

JS

  1. $("#new-category-create").effect('shake',{distance:4,times:2},50);

The CSS for .button is big so I won't paste it here.  It doesn't set position or width, but does set line-height.

Thanks.