CODEWITHSUNDEEP
css
Brett F
Brett F

Reputation: 414

Form element is lower than expected. Not sure why

I'm working on theming a drupal site (http://dev.thompsonsurgical.com/), and I can't figure out the positioning of the search items in the top-right. I put a container with a 1px border around the elements in question, and to help illustrate the issue. I can't figure out what is making the input field drop down by about 5px. Can anyone point me in the right direction?

Upvotes: 1

Views: 343

Answers (4)

Sparkup
Sparkup

Reputation: 3754

this does it :

#edit-search-block-form--2 {
border: 1px solid #E8E8E8;
height: 18px;
margin-top: 0;
padding: 0;
vertical-align: top; // modified
}

Upvotes: 3

MatTheCat
MatTheCat

Reputation: 18721

It's due to the baseline default vertical-align which let some space below images. So the <input /> is just aligned with links.

Add vertical-align:middle; for <img /> and <input /> elements.

Upvotes: 0

Seth
Seth

Reputation: 6260

For some reason your <label> tag is hidden or wrapping your input, when I viewed it in Chrome's Inspector the label was pushing down the content, you can try relatively positioning the input and setting a negative top property

Upvotes: 0

locrizak
locrizak

Reputation: 12281

I just played around with your css in firebug and it looks like this is the culprit:

.container-inline div, .container-inline label { display:inline }

If I get rid of that and add float:left it goes to the top. Because of other html elements it is on the right. Try playing around with that and you'll get it to work

Upvotes: 1

Related Questions