CODEWITHSUNDEEP
htmlcss
J.Zil
J.Zil

Reputation: 2449

Mystery padding coming from button

I basically have a problem where my button should sit on the same height as my input boxes, and all the information I have read online seems to say what I am doing is correct, but despite there being no padding on the button it still sits around 3px lower than it should do.

It can be seen here: http://jsfiddle.net/spadez/8Ej9U/embedded/result/

This is its properties:

#search_form .button {
    width:70px;
    line-height:0;
    font-size:0;
    text-indent:-999px;
    color: transparent;
    background: url(http://i.imgur.com/LCQSXXY.png) no-repeat #a6668e center;
    border: 1px solid #3079ED;
}

My question is, if the button and the input field are both 31px with no padding, why do they sit at different heights and how should I be fixing this?

Upvotes: 0

Views: 56

Answers (2)

zazvorniki
zazvorniki

Reputation: 3602

one way to fix it is to add this

input{
float:left;

}

and then clear the next emelent

http://jsfiddle.net/8Ej9U/1/

Upvotes: 0

Quentin
Quentin

Reputation: 943220

They just have different positions on the line. Specify a consistent vertical-align (probably middle) for the inputs.

Upvotes: 2

Related Questions