jQueryUI icons in table cells - jquery-ui

Question

I'm using jQuery UI icons in a table and they take up the size of the table cell, which is elongated horizontally.
Q: What html/css is necessary to make the icon have the same width as it's height?
Here's what I have so far:
<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-circle-minus"></span>
</div>
</td>

Answer 1

If the result you are expecting is the icon wrapped in a rounded box then you have to do set the container div a width of 16px, like here:
http://jsfiddle.net/marcosfromero/n2tYP/
#wanted .delete div {
width: 16px;
}

Answer 2

Not entirely sure if this is what you want, but maybe you need to set the behaviour of the div so that it does not fill 100%. Like this:
<table>
<td class="delete">
<div class="ui-state-default ui-corner-all" style="display:table">
<span class="ui-icon ui-icon-circle-minus"></span>
</div>
</td>
</table>
The div's display style is changed so that it does not scale to full width.

Answer 3

I can't tell if you want a jQuery specific answer or just a css answer. Since I don't know the former here's the latter. If you want to limit the width to known pixels and have the height adjusted so that it maintains the proper aspect ratio, a style like
img{width=32px; height= auto;}
should do the trick. Since most icons are square and of known size I would think
img{width=32px; height=32px;}
would work out too.

Answer 4

I don't understand. Are you sure some other CSS in your page isn't causing this problem?
jQuery UI CSS uses the background-image property to display images, and generally those images shouldn't be "taking up the size" of its parent.
I put together a quick jsFiddle with the following contents:
Dependencies:
jQuery 1.5.1
jQuery UI 1.8.9
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css
HTML:
<table>
<tr>
<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-circle-minus"></span>
</div>
</td>
<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowthick-1-w"></span>
</div>
</td>
</tr>
</table>
<br />
<table>
<tr>
<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-circle-minus"></span>
Hello
</div>
</td>
<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowthick-1-w"></span>
world!
</div>
</td>
</tr>
</table>
CSS:
/* Extend the width ... */
td.delete { width: 100px; }
And it came out looking fine in Google Chrome:
Is there a particular browser this is happening on for you? Can you provide a concrete example?