CODEWITHSUNDEEP
htmlcss
Patrick
Patrick

Reputation: 8063

How to align HTML buttons with links?

I'm trying to align an input button with a link (class "button"), but in Safari and Chrome there is like 1 pixel difference at the top and I can't figure out why.

alt text

<input class="button" name="commit" type="submit" value="Enrol" />
<a href="#" class="button" id="cancel">Cancel</a>

input.button {
  height: 38px;
  font-size: 18px;
  color: white;
  font-weight: normal;
  font-style: normal;
  background: #4D28B2;
  border: 1px solid gray;
  padding: 5px;
}
a.button {
  display: inline-block;
  padding: 5px;
  height: 24px;
  font-size: 18px;
  color: white;
  text-decoration: none;
  font-weight: normal;
  font-style: normal;
  text-align: left;
  background-color: #4D28B2;
  border: 1px solid gray;
}

What's the problem and how can I solve it?

Upvotes: 2

Views: 5855

Answers (3)

RussellUresti
RussellUresti

Reputation: 6221

Remove the padding, set the heights to the same value, adjust the vertical align on both, and then do box-sizing for all the browsers.

Here's a link to a working example. http://jsfiddle.net/cjXcp/5/

And the code:

input.button {
    height: 38px;
    font-size: 18px;
    color: white;
    font-weight: normal;
    font-style: normal;
    background: #4D28B2;
    border: 1px solid gray;
    vertical-align: middle;
    padding: 0px 5px;
}
a.button {
    display: inline-block;
    height: 38px;
    font-size: 18px;
    color: white;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
    text-align: left;
    background-color: #4D28B2;
    border: 1px solid gray;
    vertical-align: middle;
    line-height: 38px;
    padding: 0px 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

This code could be reduced in verbosity, but you get the idea.

Upvotes: 5

Flatlin3
Flatlin3

Reputation: 1659

Appending float:left; to both elements fixes this problem in Chrome and Firefox. You may also add margin-left:2px; to .button to restore the missing gap between the buttons when using this solution.

Upvotes: 2

Core Xii
Core Xii

Reputation: 6441

One possible culprit is excess whitespace. Different browsers interpret indentation and line-breaks in HTML differently. You should output all your HTML through a whitespace-stripping function. (as a bonus, it could also save bandwidth)

This is what I do, though it doesn't play nice with JavaScript:

function ob_compress_html($str)
    {
    return preg_replace(array('{>\s{2,}<}', '{^\s+}', '{\s+$}D'), array('><'), $str);
    }

ob_start('ob_compress_html');

Upvotes: 0

Related Questions