Button Height on Chrome

Question

So, I have this problem that has never happened to me before. I am trying to place a text box exactly next to a button that I have already done, and it looks great.

The problem is that it works fine on firefox, but on chrome the only problem is the height of the button. I do not know why he did not take the indicated height. Everything else on my site works fine (in height), it still indicated the height on all cross-platforms

Here is the code:

HTML

<div> <!-- filter item start --> <p> <a href="#" id="add-friend-feed-link"> Add Friend </a> </p> <form method="post" action="" name="searchFriendForm" id="add-friend-search"> <input type="text"/ name="searchFriendText"> <input type="button" class="small green button" id="add-friend-button"/> </form> <hr> </div> <!-- filter item end --> 

and CSS

 /* Absolutes start */ #add-friend-search{ display: block; position: absolute; } #add-friend-search input[type="text"]{ -moz-border-radius:4px 0px 0px 4px; -moz-box-shadow:0 1px 0 #444444; -webkit-border-radius:4px 0px 0px 4px; -webkit-box-shadow:0 1px 0 #444444; border-radius:4px 0px 0px 4px; box-shadow:0 1px 0 #444444; background:none repeat scroll 0 0 #D4D8DF; border:1px solid black; color:#444444; font:13px Arial,sans-serif; height:19px; margin: 20px 4px 4px; padding:5px 6px 4px; width:250px; text-align: center; float: left; display: inline-block; } #add-friend-search{ background:url("../images/small arrow.png") no-repeat scroll 88px 2px transparent; display:block; position:absolute; width:332px; } #add-friend-search input[type="button"]{ background:url("../images/search icon.png"); background-position: center; } #add-friend-button{ border: 1px solid black; border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0 4px 4px 0; display: inline-block; height: 21px !important; margin-right: 33px; margin-top: 20px; position: absolute; right: 0; max-height: 31px; } /*Absolutes end */ 

this is what firefox looks like

and this is what looks like chrome

this is an xcss button containing a little green, but I should not change this CSS AT ALL

 /*-------------------------------------------------------------------------------------------- Button Styles Reset - Gets rid of Browser Specific Issues -------------------------------------------------------------------------------------------- */ input[type="button"], button { border:0 none; font:inherit; } *:focus{outline:0 none;} input[type="submit"] {border:1px solid rgba(0, 0, 0, 0.25);} input[type="button"], button {-moz-box-sizing: content-box;} input[type="button"]::-moz-focus-inner, button::-moz-focus-inner { padding:0;border:0 none; }/*fixes mozilla button padding */ .clearfix:after { clear: both; content: '.'; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; } /*-------------------------------------------------------------------------------------------- General Button Styles, Cascades Down To Every Button -------------------------------------------------------------------------------------------- */ .button { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.50); -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.50); box-shadow:0 1px 3px rgba(0, 0, 0, 0.50); background:#222222 url(button-images/button-overlay.png) repeat-x; border:1px solid rgba(0, 0, 0, 0.25); color:#FFFFFF !important; cursor:pointer; display:inline-block; font-size:13px; font-weight:bold; line-height:1; overflow:visible; padding:5px 15px 6px; position:relative; text-decoration:none; text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25); width:auto; text-align:center; } .button:hover { background:#111111; color:#FFFFFF; } .button:active { background:#242424; } .green.button { background-color:#91BD09; } .green.button:hover { background-color:#749A02; } .green.button:active { background-color:#a4d50b; } .blue.button { background-color:#0E59AE; } .blue.button:hover { background-color:#063468; } .blue.button:active { background-color:#1169cc; } .purple.button { background-color:#660099; } .purple.button:hover { background-color:#330066; } .purple.button:active { background-color:#7f02bd; } .breen.button { background-color:#2DAEBF; } .breen.button:hover { background-color:#007D9A; } .breen.button:active { background-color:#36cbdf; } .red.button { background-color:#CC0000; } .red.button:hover { background-color:#990000; } .red.button:active { background-color:#ea0202; } .magenta.button { background-color:#A9014B; } .magenta.button:hover { background-color:#630030; } .magenta.button:active { background-color:#ce025c; } .orange.button { background-color:#FF5C00; } .orange.button:hover { background-color:#D45500; } .orange.button:active { background-color:#fd762a; } .yellow.button { background-color:#FFE115; } .yellow.button:hover { background-color:#E4C913; } .yellow.button:active { background-color:#fee539; } .white.button { background-color:#FFFFFF; border:1px solid #CCCCCC; color:#666666 !important; font-weight:normal; text-shadow:0 1px 1px #FFFFFF; } .white.button:hover { background-color:#EEEEEE; } .white.button:active { background-color:#ffffff; } .gray.button { -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.50); background:#FFFFFF url(button-images/button-overlay-black.png) repeat-x; border:1px solid #BBBBBB; color:#555555 !important; text-shadow:0 1px 1px rgba(255, 255, 255, 0.5); } .gray.button:hover { background-color:#EEEEEE; border-color:#999999; color:#444444 !important; } .gray.button:active { background-color:#ffffff; } /*-------------------------------------------------------------------------------------------- Small Buttons -------------------------------------------------------------------------------------------- */ .small.button { font-size:11px; padding:5px 15px 6px; background-image:url(button-images/small-button-overlay.png); } input[type="submit"].small.button, .small.button.input { padding:3px 15px 4px; } input[type="button"].small.button, button.small.button { padding:4px 15px; } /*-------------------------------------------------------------------------------------------- Tall Buttons -------------------------------------------------------------------------------------------- */ .tall.button { font-size:14px; padding:8px 19px 9px; background-image:url(button-images/tall-button-overlay.png); } .tall.gray.button { background-color:#FFFFFF; background-image: url(button-images/tall-black.png); background-repeat:repeat-x; } .tall.gray.button:hover { background-color:#EEEEEE!important; border-color:#999999; color:#444444 !important; } .tall.gray.button:active { background-color:#FFFFFF!important; } .tall.button em { font-size:11.5px; font-style:normal; display:block; margin-top:5px; } /*-------------------------------------------------------------------------------------------- Round Buttons -------------------------------------------------------------------------------------------- */ .round.button { -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; background-image:url(button-images/round-button-overlay.png); border:1px solid rgba(0, 0, 0, 0.25); font-size:13px; padding:0; } .round.button span { -moz-border-radius:14px; -webkit-border-radius:14px; border-radius:14px; display:block; line-height:1; padding:4px 15px 6px; } .round.button.input { padding:3px 13px 4px; } .small.round.button { -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px; font-size:11px; } input[type="button"].round.small.button, button.round.small.button { padding:0; } .small.round.button span { -moz-border-radius:11px; -webkit-border-radius:11px; border-radius:11px; padding:6px 15px 6px; } .large.round.button { -moz-border-radius:18px; -webkit-border-radius:18px; border-radius:18px; background-position:left bottom; } .large.round.button span { -moz-border-radius:17px; -webkit-border-radius:17px; border-radius:17px; font-size:14px; padding:7px 20px 9px; } .large.tall.round.button small { display:block; margin-top:5px; } 

Answer 1

Chrome and Firefox seem to conflict with the display of styles in your classes: small, green, and input in combination with the style used for the add friend button.

This button applies many styles. I suggest you try rebuilding this form by adding a class at a time and checking in each browser until you come across the difference.

EDIT The difference between the rendering of the submit button is related to

 -moz-box-sizing: content-box; 

located in your css class

 input[type="button"], button { -moz-box-sizing: content-box; } 

enable if you disabled firebug in firefox and you will see that the button is the same size as in chrome.

Answer 2

There's a good article on this at quirksmode.org, and you can find documentation on box size in MDN . The solution is the same as Nicholas suggests.

 input[type=submit], input[type=button], button { box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -webkit-box-sizing: content-box; } 

As with border-radius , I prefer to use SASS mixin to handle browser prefixes.