Grouped buttons inside toolbar result in broken layout

Grouped buttons inside toolbar result in broken layout

The following markup results in a broken layout (tested FF 3.6.15 and Chrome 9.0.597.98):

  1. <div data-role="page" id="thread">
  2.     <div data-role="header" data-backbtn="false">
  3.         <a id="backToBoard" data-direction="reverse" data-icon="arrow-l" data-iconpos="notext">Back</a>
  4.         <h1 id="threadTitle">Title</h1>
  5.         <div data-role="controlgroup" data-type="horizontal">
  6.             <a id="refreshButton" data-icon="refresh" data-theme="b" data-iconpos="notext" data-role="button">Refresh</a>
  7.             <a id="actionsButton" data-icon="grid" data-theme="a" data-iconpos="notext" data-rel="dialog" data-role="button">Actions</a>
  8.         </div>
  9.     </div>
  10.     <div data-role="content">
  11.         CONTENT
  12.     </div>
  13. </div>
As a workaround, you can write:
  1. <div data-role="header" data-backbtn="false">
  2.       <div data-role="controlgroup" data-type="horizontal" style="float: right; margin: 5px">
  3.             <a id="refreshButton" data-icon="refresh" data-theme="b" data-iconpos="notext" data-role="button">Refresh</a>
  4.             <a id="actionsButton" data-icon="grid" data-theme="a" data-iconpos="notext" data-rel="dialog" data-role="button">Actions</a>
  5.         </div>
  6.         <a id="backToBoard" data-direction="reverse" data-icon="arrow-l" data-iconpos="notext">Back</a>
  7.         <h1 id="threadTitle">Title</h1>
  8.     </div>
However, it should work without that workaround.

Cheers
winSharp93