Multiline HTML input button with line break adds unwanted margin

button, css

Solution

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;
}

Problem

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?

Original source