HTML and CSS My text input box keeps changing height

Question

I'm making a search bar. The text input box and search button are next to each other as planned, but the height of the input box keeps changing when the browser is expanded. I've been through my code several times and I can't find what's causing the problem. Any help would be appreciated :)

http://jsfiddle.net/tmjfd/3/

Answer 1

You are defining your padding is given as a percentage. This will scale according to your document size, and will affect your total input height. You need to use fixed values if you don't want the input to scale.

Answer 2

if you change

input{
    padding: 1.5%; 
}

to

input{
    padding: 6px;
}

That will fix it. The problem was that the percentage of the padding is based on the window size.

Answer 3

The problem is caused by setting padding: 1.5%. The percentage is relative to the width of the containing block. Remove it or use the em unit instead, depending on the design requirements.