CODEWITHSUNDEEP
htmlcsssearchbar
amandathewebdev
amandathewebdev

Reputation: 259

HTML and CSS My text input box keeps changing height

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/

Upvotes: 0

Views: 1415

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

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.

Upvotes: 0

laymanje
laymanje

Reputation: 833

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.

Upvotes: 0

Jeff B
Jeff B

Reputation: 30099

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.

Upvotes: 3

Related Questions