Button text wrap: vertical alignment issue

Question

I needed to wrap text inside my buttons so I found this solution:

How to wrap text of html button with fixed width

However, after applying the solution I noticed that the vertical alignment of buttons changes. Here is the screenshot:

Here is the code:

<html>
<head>
    <title>Button Wrap</title>

    <style type="text/css">

        INPUT.StandardButton
        {           
            WIDTH: 87px; 
            HEIGHT: 38px;
            font-size: 10pt; 
            Font-weight: bold;                      
            cursor: pointer;
            FONT-FAMILY: Arial, Verdana;
            COLOR: #0049A5;                                 
        }

    </style>

<head>
<body>

    <input type="button" value="NoWrap" class="StandardButton" />
    <input type="button" value="This is Test 1" class="StandardButton" style="white-space: normal;" />
    <input type="button" value="This is Test 2" class="StandardButton" style="white-space: normal;"  />
    <input type="button" value="This is Test 3" class="StandardButton" style="white-space: normal;" />

</body>
</html>

Any idea what is causing the alignment change? Thanks!

score 6 · Accepted Answer · answered Jan 03 '12 at 16:27

6

I'm not sure what's causing this misalignment, but apparently vertical-align:middle seems to fix it:

http://jsfiddle.net/ptriek/Dr5hM/

answered Jan 03 '12 at 16:27

ptriek

9,040
5
31
29

In chrome the white space property on buttons are set to pre so the boxes with it set to normal that wrap seem to be the only ones that show this problem. Thats very odd. – Matthew Green Jan 03 '12 at 16:33
Vertical alignment indeed fixed the problem. Thanks! – Alex S Jan 03 '12 at 17:38
Sorry for updating so fast but I just noticed that adding vertical-align:middle will remove text wrapping in IE9. Works fine in Chrome however. Any ideas? – Alex S Jan 03 '12 at 17:48
OK, compared the differences in JSFiddle and my html and found out that DOCTYPE needs to be set to – Alex S Jan 03 '12 at 17:58
I had the same problem even with but `vertical-align` solved it for me nonetheless. Thanks a lot! – Udo G May 24 '12 at 14:40

score 0 · Answer 2 · answered Jan 03 '12 at 16:48

0

Not sure what is causing it either but valign, putting the buttons in a table, our making the buttons width shorter should clear this up very quickly.

answered Jan 03 '12 at 16:48

B Woods

580
3
7
21

Button text wrap: vertical alignment issue

2 Answers2