Menubutton rendering incorrectly in current Showcase

Examples:
http://www.primefaces.org/showcase-labs/ui/menubutton.jsf
Toolbar "Navigate" button here: http://www.primefaces.org/showcase-labs/ui/themeswitcher.jsf

Rendering problems:
1. Button height is larger than it should be
2. Triangle icon is rendered twice, one slightly offset from the other
[Edit] 3. Buttons is wider than it should be
[Edit] 4. Space between icon and text is too large

Has been like this for a few days, so I thought I should mention it.

[optimus.prime]

By design.

Looks normal in IE9:


Looks terrible in FF8:

[optimus.prime]

Works good on my ff8.

Couldn't say what's ultimately causing this. But FireBug shows the HTML is different between my FF8 and IE9.

In IE9:

Code: Select all

<div class="ui-menubutton" id="j_idt44:j_idt45">
  <button name="j_idt44:j_idt45_button"
          class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left"
          id="j_idt44:j_idt45_button" type="button">
    <span class="ui-button-icon-left ui-icon ui-icon-triangle-1-s"/>
    <span class="ui-button-text">Options</span>
  </button>
</div>


In FF8:

Code: Select all

<div class="ui-menubutton" id="j_idt44:j_idt45">
  <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-button-text-icon-primary"
          type="button" name="j_idt44:j_idt45_button" id="j_idt44:j_idt45_button" role="button" aria-disabled="false">
    <span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span>
    <span class="ui-button-text">
      <span class="ui-button-icon-left ui-icon ui-icon-triangle-1-s"></span>
      <span class="ui-button-text">Options</span>
    </span>
  </button>
</div>