button text alignment in FireFox 3.6

Hello.

The text and images on a AW.UI.Button are slightly off center when viewed with the latest FireFox release 3.6.

You can see this by going to your Products page on the Active Widgets site: http://www.activewidgets.com/grid/ (button example).

It does not happen using FireFox 3.5.8.

This is probably a FireFox 3.6 problem, but is there anything we could do to fix this problem?

Setting the button position to absolute seems to fix it, but is there a better solution?

Thanks.

We have the same problem..

This is a Firefox 3.6 problem (FF3.5.x and earlier are ok). It affects button, label, checkbox and link controls. Can be fixed with -

.aw-ff3 .aw-system-control.aw-text-expand {
    display: inline-block;
}

Thanks Alex.
This fixes the FireFox 3.6 problem.

Alex, thanks for the fix, but it seems to causes problems with a tab control that is within a table. For example, go to your "divs.htm" example in "controls - tabs", add in the FF3.6 CSS inline-block fix, and also put table elements around the tab span/divs, i.e.:

<table>
<tr>
<td>
<span id="myTabs"></span>
<div id="myContent" style="border: 1px solid #aaa; height: 200px; padding: 10px">
<div id="div1" style="display:none">Page 1, empty.</div>
<div id="div2" style="display:none">Page 2, still not much text here...</div>
<div id="div3" style="display:none">Page 3, the last one.</div>
</div>
</td>
</tr>
</table>

Then you'll see that the tab contrll seems to push a long way to the right. I think the problem is with the span rather than the divs. It only happens with the table elements present (which is how I use the tab control). Any suggestions?
Thanks, Justin

Does anyone have any suggestions? Thanks.

Are you sure you copied the code correctly (i.e. there is no space between .aw-system-control and .aw-text-expand)?

in any case you can apply the fix to buttons only -

.aw-ff3 .aw-ui-button {
display: inline-block;
}

Thanks Alex. Much appreciated.

with ff 3.6.10 and applying the above in style as follows:

.aw-ff3 .aw-ui-button {
display: inline-block;
}
.aw-grid-control {height: 225px; width: 110%; font: menu;}

still results in non-centered text in the button. do I have this in the wrong place?

Thank you.