CODEWITHSUNDEEP
htmlcss
MissCoder87
MissCoder87

Reputation: 2669

Wrapping text in CSS buttons & weird height issues

I've got the following CSS and Button setup to create buttons in my project. However they now want all the buttons the same width and not growing based on the size of the text. And they want the text to wrap. I've got the text wrapping and the same width and height with fixed width and height but it moves the buttons to weird places and the text in the center needs to be moved up so it's all still centralised (if that makes sense!)

http://www.screenup.info/uploads/4548070.jpeg is an example of how it's coming out. As you cna see they've jumped all over the place and the text isnt in the middle when it wraps.

jsFiddle: http://jsfiddle.net/DqUfx/

.dark-orange-button
{
    -moz-box-shadow: inset 0px 1px 0px 0px #fed897;
    -webkit-box-shadow: inset 0px 1px 0px 0px #fed897;
    box-shadow: inset 0px 1px 0px 0px #fed897;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6b33d), color-stop(1, #d29105) );
    background: -moz-linear-gradient( center top, #f6b33d 5%, #d29105 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#f6b33d' , endColorstr= '#d29105' );
    background-color: #f6b33d;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    border: 3px solid #eda933;
    display: inline-block;
    color: #ffffff;
    font-family: arial;
    font-size: 15px;
    font-weight: bold;
    width: 300px;
    height: 18px;
    text-align:center;
    padding: 23px 56px;
    text-decoration: none;
    text-shadow: 1px 1px 0px #cd8a15;
}

.dark-orange-button:hover
{
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d29105), color-stop(1, #f6b33d) );
    background: -moz-linear-gradient( center top, #d29105 5%, #f6b33d 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#d29105' , endColorstr= '#f6b33d' );
    background-color: #d29105;
}

.dark-orange-button:active
{
    position: relative;
    top: 1px;
}

Upvotes: 0

Views: 2982

Answers (1)

thirtydot
thirtydot

Reputation: 228302

To fix the misplacement, add vertical-align: top where you have display: inline-block.

http://jsfiddle.net/thirtydot/DqUfx/1/

Vertically centering multiple lines of text is easy if you don't need to support IE6/7 - use display: table-cell.

http://jsfiddle.net/thirtydot/DqUfx/2/

If you do need to support IE6/7, look here or here.

Upvotes: 1

Related Questions