jQueryUI icons in table cells

I'm using jQuery UI icons in a table and they take up the size of开发者_如何学JAVA 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>

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;   
}

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.

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.

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:

1. jQuery 1.5.1
2. jQuery UI 1.8.9
3. 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?