create superscript jqeryui button

Question

I am trying to replicate a superscript icon in text within a jquery ui button. I have tried several combos but everything screws up the button. It will align incorrectly within a buttonset().

css

.superscript{float: left; font-size:xx-small; vertical-align:top;} 
.floatleft{ float: left;}

js

$("<a/>",{
href : "#",
html : '<span class="floatleft">x</span><span class="superscript">2</span>',
}).button();

Does anyone have any suggestions?

Answer 1

Why not just use the HTML <sup> tag instead of a span?

Answer 2

In your CSS, if you give float: left; it affects the vertical-align: top; because, vertical-align can be given only to inline elements and when you float, it becomes a block level element.

Small change in your CSS.

.superscript {font-size: xx-small; vertical-align: top;} 
.floatleft {float: left;}

That should work. Fiddle.