1

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

IE sucks version 7 does not:

bad example

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. (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.

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

Whatever shall I do?

Community
  • 1
  • 1
alex
  • 479,566
  • 201
  • 878
  • 984

5 Answers5

1

Anyway, when you float an element it becomes a block box. Display:inline is useless. And you should always set a width on floated items.

Julien CROUZET
  • 774
  • 9
  • 18
  • `display: inline` is useful for avoiding the double margin bug in IE6. Why should I always set a width, when IE7 is the only browser having an issue? – alex Oct 04 '10 at 07:40
1

You need to explicitly define a width for horizontal floats or the float drops. The alternative is using inline-block.

If that doesn't work let me know.

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
  • Thanks Meder. I might use `inline-block`. I'll try in the morning, I'm going to have a break now. – alex Oct 04 '10 at 08:12
  • Hey Meder, I tried giving the icon `display: inline` (or its equivalent) for IE7 and the buttons went blank! See my edit on OP - give me a pointer in the right direction and you will have an accepted answer sir! – alex Oct 04 '10 at 23:58
0
<button type="submit"><span class="ui-icon ui-icon-mail-closed"></span><span style="float:left;">Send</span></button>
Dhaval Tawar
  • 31
  • 4
0

your rendered html,

<button type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button" aria-disabled="false">
    <span class="ui-button-icon-primary ui-icon ui-icon-mail-closed"></span>
    <span class="ui-button-text">Send</span>
</button>

have you tried css,

button span.ui-button-text {
    display: inline;
    float: left;
}
Reigel Gallarde
  • 64,198
  • 21
  • 121
  • 139
  • Thanks for your answer. I tried that, and then I tried it again just then with IE Developer Tools, and it didn't work :( – alex Oct 04 '10 at 08:09
0

Try 

button span.ui-icon {
    display: inline;
    float: left;
    margin-right: 2px;
}
button{width:75px;}

IE need a width for the button I think.

Here's my jsfiddle try

Shikiryu
  • 10,180
  • 8
  • 49
  • 75