Multiline HTML input button with line break adds unwanted margin

Question

I am writing a "till" app that has a load of buttons. Layout is fine so long as the button value doesn't wrap. If it is wrapped onto a new line, the margins between the buttons screw up.

(If there is only a single line of text, they butt up nicely.)

The buttons are generated by looping through a collection of custom "drink" objects:

            foreach (drink d in drinks)
        {
            buttons = buttons + "<input id='" + d.drinkID + "' class='drinkButton " + d.cssClass + "' type='button' value='" + d.name + "' />";
            if ((d.drinkID == 13) || (d.drinkID == 41))
            {
                buttons = buttons + "<input id='0' class='drinkButton spacer' disabled='disabled' type='button' value='' />";
            }
            if (d.drinkID == 17)
            {
                buttons = buttons + "<input id='0' class='drinkButton spacer' disabled='disabled' type='button' value='' /><input id='0' class='drinkButton spacer' disabled='disabled'  type='button' value='' />";
            }

        }

And the css is as follows:

input.drinkButton
{
    width:94px;
    height: 67px;
    font-size:1em;
    margin: 0px 6px 6px 0px;
    font-weight:normal;
    white-space: normal;
    padding: 0px;
}

How do I make them line up properly?

Answer 1

oh how i hate these little bugs/issues.

of the top of my head, is it a vertical-align issue?.

--EDIT--

yep, vertical-align... try top/bottom vertical-align and then see...

input.drinkButton
{
    width:94px;
    height: 67px;
    font-size:1em;
    margin: 0px 6px 6px 0px;
    font-weight:normal;
    white-space: normal;
    padding: 0px;
    vertical-align:bottom;
}