css Need help with CSS - alignment issue

[wrack]

Hi,

 

I have got a site http://hagglehive.com/ and on the top there is a search box.

 

In IE10+ and Firefox all is well. See below.

 

 

In Chrome and Safari the search textbox is out of alignment. See below. I have tried many things but not sure what to do?

 

 

Any ideas, suggestions are welcome :)

Thanks.

[Seahorsepip Veteran]

.SearchBox {
    float: left;
}

Floats are magic  :shiftyninja:

[spacer]

Have you tried explicitly setting the line-height property of the search box container? For instance, if the container is 100px high, you can set the line-height to 100px, and that typically centers inline items; all things being equal.

 

You may also get better responses if you give us examples of the DOM and styles already in place, and what you've tried already that didn't work.

[+Zlip792 MVC]

Worthwhile read, I recommend you read and try given trick on it:

 

http://css-tricks.com/webkit-html5-search-inputs/

 

Below code do fix it but with little trade of alignment in IE with in front of text but only sharp eye can catch it IMO.

Try this:

input[type=text] 
{
line-height: 3em;
} 

[+Zlip792 MVC]

.SearchBox {
    float: left;
}

Floats are magic  :shiftyninja:

 

 

Bang Bang boy!!! Rocked!!!

[wrack]

.SearchBox {
    float: left;
}

Floats are magic  :shiftyninja:

 

Darn diddly. I swear tried that too! Guess I was not trying enough. Thanks man.