jquery ui dialog: ui-icons showing up weird

Question

When adding an ui-icon element to a jquery dialog, something weird is displayed instead of the requested icon - (check here for an example: http://jsfiddle.net/aE2Fb/)

It seems like ui-state-default somehow hides the actual icon, because if I remove it, then icon shows up ok. Note that same issue occurrs with ui-state-hover as well.

<div id="dialog" title="Basic dialog" class="">  
<span class="ui-icon ui-state-default ui-icon-plusthick ui-corner-all" ></span>
</div>

$(function() {
$( "#dialog" ).dialog();
});

Similar topic was discussed here:jquery ui Portlet : incorrect effect on hover ( ui-state-hover ), but the "fix" was not explained at all and therefore its not really clear, what is going on...

Answer 1

When you put the div into a jQuery UI dialog, you add a load of extra parents, and extra classes - with the result that the icon image file you wanted is getting over-ridden twice.

The first override is from the css for the standard widget background image, which also sets the image position to '50% 50%' - so putting the middle of the image in your button. This then again gets over-ridden back to the correct icon image file, but without any position settings - so you end up seeing the middle of the icon image in your button.

Try putting the icon span inside another container, and move the ui-state-default and ui-corner-all classes to the container instead:

http://jsfiddle.net/7CLL6/

<div id="dialog" title="Basic dialog" class="">  
  <span class='ui-state-default  ui-corner-all'>
    <span class="ui-button ui-icon ui-icon-plusthick"></span>
  </span>
</div>