Reputation: 16097
I've been racking my brains out to fix this but I am not an HTML/CSS expert so I'm out of my wits.
The placeholder text is shown too high from the center of the input box element.
See the following image:
How can I fix this? You can see them live at http://siliconalley.com. When you type inside the input, it actually looks alright. It's just the placeholder that is looking weird.
Upvotes: 0
Views: 8049
Reputation: 6219
your CSS is looking Like this
Actually it is line-height problem
.navbar-search .search-query {
margin-bottom: 0;
padding: 4px 14px;
font-family: Open Sans,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 1;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
Change to Like this
.navbar-search .search-query {
margin-bottom: 0;
padding: 4px 14px;
font-family: Open Sans,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 21px; /**change the Line-height to like this**/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
Upvotes: 0
Reputation: 341
You can force the line-height style the value of auto, with that u will fix the problem in Chrome and won't mess up in IE. I've tested on FF, Chrome and IE
.search-query {
line-height: auto !important;
}
Upvotes: 0
Reputation: 1344
Your line-height:1;
declaration is causing the problem. Remove this for .navbar-search .search-query
and it should be fine.
Upvotes: 0
Reputation: 11303
Your current line-height is 1, change it so it is equal to the height of your element and it becomes centered.
line-height: 30px;
Upvotes: 3