Page 1 of 1

Menubutton rendering incorrectly in current Showcase

Posted: 26 Nov 2011, 04:41
by porthos
Examples:
http://www.primefaces.org/showcase-labs ... button.jsf
Toolbar "Navigate" button here: http://www.primefaces.org/showcase-labs ... itcher.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.

Re: Menubutton rendering incorrectly in current Showcase

Posted: 26 Nov 2011, 10:32
by cagatay.civici
By design.

Re: Menubutton rendering incorrectly in current Showcase

Posted: 26 Nov 2011, 13:47
by porthos
Looks normal in IE9:
Image

Looks terrible in FF8:
Image

Re: Menubutton rendering incorrectly in current Showcase

Posted: 26 Nov 2011, 16:12
by cagatay.civici
Works good on my ff8.

Re: Menubutton rendering incorrectly in current Showcase

Posted: 26 Nov 2011, 16:28
by porthos
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>