I used jQuery UI buttons in a project, and they have been working fine.

But, in IE7, the icon doesn't float as it should. I realise IE doesn't have rounded corners support yet, but that is OK.

*Good browsersSome browsers* render it fine
-------------------------------------------

![good example](https://i.stack.imgur.com/UDLxn.png)

IE sucks version 7 does not:
----------------------------

![bad example](https://i.stack.imgur.com/SazkN.png)

I start with a button in the HTML

```
<button type="submit"><span class="ui-icon ui-icon-mail-closed"></span>Send</button>

```

I then loop through the buttons, using this little bit of jQuery on each

```
$('#content button').each(function() {                
    var icon = $(this).find('span.ui-icon');
    var primaryIcon = icon.attr('class').replace(/ui-icon\s?/, '');
    icon.remove();
    $(this).button({ icons: {primary: primaryIcon }, label: $(this).text() });
});

```

I was just calling `button()` on them, but I decided to do this to make sure I was using the library the way it was designed.

I had some CSS on the icon too

```
button span.ui-icon {
    display: inline;
    float: left;
    margin-right: 0.1em;
}

```

The page from above is [also available](http://bit.ly/bBoHvZ). (shortened to void HTTP referrer, I hope).

What am I doing wrong?

Thanks very much!

Update
------

I tried making the icon as an inline block element, as per [Meder's answer](https://stackoverflow.com/questions/3853171/help-with-float-and-jquery-ui-button/3853528#3853528).

```
button span.ui-icon {
    display: inline;
    float: left;
    margin-right: 0.1em;
    margin-top: -1px;
    /* get rid of margin for inline element */
    #margin: auto; 
    /* this should revert the element to inline as per declaration above */
    #float: none; 
    /* hasLayout = true */ 
    #zoom: 1;
}

```

This, however, has the unusual affect of blanking the button elements!

![IE7 with display: inline-block on icon](https://i.stack.imgur.com/2eSOL.png)

Whatever shall I do?