css padding issue in chrome (but not in firefox)

Question

I've got a weird issue with my searchbar padding in chrome.

The css:

#searchbar {
    height: 15px;
    width: 135px;
    background: url("../img/search.png") no-repeat scroll 6px 6px rgba(0, 0, 0, 0);
    color: #ff8000;
    font-size: 0.9em;
    border: 1px dotted #ff8000;
    padding: 7px 9px 7px 32px;
    margin: 10px 0;
}

In firefox it works as intended but chrome displays the searchbar without applying the padding:

Any ideas what I could change here?

EDIT: I could get it to work with removing the padding and increasing the width of the searchbar. However, there still is an issue with different widths between chrome and firefox.

Solution 1

Remove the height: 15px declaration from the CSS to fix the different heights.

Then add the following to make sure browsers are using the same box-model which will fix the width difference between Chrome and FF.

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

http://jsfiddle.net/davidpauljunior/RAPqK/2/

A bit about box-sizing: http://css-tricks.com/box-sizing/

NOTE: As Avall says, this won't work in IE7.

Solution 2

Box-sizing: border-box; is your new best friend. -> https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

http://jsfiddle.net/Bushwazi/JGb9A/1/

Solution 3

I think the problem is with the display of your #searchbar. Make sure it's not inline.

display:block

or

display:inline-block;
#display:inline; /* IE7 */

Vertical paddings are undefined in inline elements.

Comments

[avall]

box-sizing is totally unnecessary in here and not supported in i.e. IE7. display is sufficient.

[davidpauljunior]

OP said "Any ideas what I could change here?" This is one idea.

[davidpauljunior]

Not at all, it's interesting! I'm not trying to be difficult at all. After you mentioned it I was trying to use display: inline-block to fix the width issue, but can't get the widths to show the same from Chrome to FF? jsfiddle.net/davidpauljunior/RAPqK/5

[avall]

Well, I must admit you win. input is tricky one and interpretation of display:block is different in these web browsers. box-sizing does the same in FF and Chrome. It's odd though. I'm used to width with outer padding, not inner. I tried to use box-sizing and display on input and div and they went totally different.....

[davidpauljunior]

Forms are a whole world of weird. I removed one of my comments as it was misleading to the answer. My apologies for the fact that the comments have a slightly odd flow now

[sqe]

Thank you very much. I haven't heard anything of box-sizing before, very interesting! I like the clean code I can achieve with it.