Multi-line HTML input button with line break adds unwanted margin

Question

I am writing a do application that has a load of buttons. The layout is great if the value of the button does not wrap. If it is wrapped in a new line, the fields between the buttons will be clogged.

(If there is only one line of text, they look great.)

Buttons are generated by scrolling 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 css looks like this:

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

How can I configure them correctly?

Answer 1

oh how i hate these little mistakes / problems.

at the top of my head, is this a problem with vertical alignment ?.

- EDIT -

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

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