jquery ui toolbar toggle button height issue

The issue turned out to be that jquery needs the toolbar buttons to be buttons. Not inputs of type button.

by larsolesimonsen

HTML

<script src="http://code.jquery.com/ui/1.9.0-rc.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0-rc.1/themes/base/jquery-ui.css">
<div>
    <div id="toolbar" class="ui-widget-header ui-corner-all">
        <button id="new-message">button</button>
        <button id="do-archive">submit</button>
        <input type="checkbox" id="show-archived-toggle"/>
        <label class="unselectable" for="show-archived-toggle" id="toggle-label">toggle</label>
    </div>
</div>
<div>
    <div id="toolbar" class="ui-widget-header ui-corner-all">
        <button id="beginning">go to beginning</button>
    <input type="button" id="rewind" value="Rewind"/>
        <button id="play">play</button>
        <button id="stop">stop</button>
        <button id="forward">fast forward</button>
        <button id="end">go to end</button>
    
        <input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
    
        <span id="repeat">
            <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
            <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
            <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
        </span>
    </div>
</div>

CSS

#toolbar {
   padding: 10px 4px;
}

JavaScript

$('#new-message, #do-archive, #show-archived-toggle').button();

        $( "#beginning" ).button({
            text: false,
            icons: {
                primary: "ui-icon-seek-start"
            }
        });
        $( "#rewind" ).button({
            text: false,
            icons: {
                primary: "ui-icon-seek-prev"
            }
        });
        $( "#play" ).button({
            text: false,
            icons: {
                primary: "ui-icon-play"
            }
        })
        .click(function() {
            var options;
            if ( $( this ).text() === "play" ) {
                options = {
                    label: "pause",
                    icons: {
                        primary: "ui-icon-pause"
                    }
                };
            } else {
                options = {
                    label: "play",
                    icons: {
                        primary: "ui-icon-play"
                    }
                };
            }
            $( this ).button( "option", options );
        });
        $( "#stop" ).button({
            text: false,
            icons: {
                primary: "ui-icon-stop"
            }
        })
        .click(function() {
            $( "#play" ).button( "option", {
                label: "play",
                icons: {
                    primary: "ui-icon-play"
                }
            });
        });
        $( "#forward" ).button({
            text: false,
            icons: {
                primary: "ui-icon-seek-next"
            }
        });
        $( "#end" ).button({
            text: false,
            icons: {
                primary: "ui-icon-seek-end"
            }
        });
        $( "#shuffle" ).button();
        $( "#repeat" ).buttonset();