Button with icon not displayed correctly in Firefox when button has css height.

Button with icon not displayed correctly in Firefox when button has css height.

Hi,

Got a couple of html buttons that I'm applying the jQuery UI button widget to, with icons on the buttons.

These buttons have a css style to set the width & height.
In IE the icons are fine, to the left of the button in the middle aligned with the text.
However, in Firefox 3.6 the icon is at the bottom left corner of the button.

If I take the height style off the button then the icon is aligned correctly.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
      <title></title>
        <link rel="stylesheet" href="jquery-ui-1.8.custom.css" type="text/css" />
        <script type="text/javascript" src="query-1.4.2.min.js"></script>
        <script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
    </head>

    <body style="font-family:Arial; font-size:small;">
        <button id="ButtonPlanningHistory" type="button" style="height:70px;width:170px;" onclick="top.location='search.aspx';">Planning History</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button id="ButtonMainRegister" type="button" style="height:70px;width:170px;" onclick="top.location='register.aspx';">Main Register</button>
           
        <script type="text/javascript">
            $("button").button({icons:{primary:'ui-icon-arrowthick-1-e'}});
        </script>           
    </body>
    </html>





















This is using the smoothness theme.

Am I missing something, or is this a problem?

Cheers,
Mike