Vertically aligning text within input in Firefox - Windows only
This is probably a simple fix but I cannot find out how to vertically align my text in firefox on a PC.
I am using this text which I have always used to center:
input.input_search_bg {
background: url("../images/input_search.png") no-repeat scroll 0 0 transparent;
border: 0 none;
color:开发者_JAVA技巧 #145D94;
float: left;
font-size: 13px;
height: 26px;
line-height: 26px;
margin: 0 7px 0 0;
padding: 0 8px 0 7px;
width: 266px;
}
I have the line-height centering it, and on a Mac it looks great. But when I test on for FF 3.0 on a PC it isnt aligned. Any thoughts on how to fix this?
HTML for that section:
<div class="top_search">
<form>
<div class="search_box">
<input type="text" value="Search" class="tog input_search_bg" />
</div>
<input type="submit" class="search_submit_btn" />
</form>
</div>
Sadly firefox (don't know all versions) doesn't allow to specify your own line-height on input
elements: http://www.cssnewbie.com/input-button-line-height-bug/
You have to play with font-size
and/or padding
.
Give padding-bottom,
input.input_search_bg {
background: url("../images/input_search.png") no-repeat scroll 0 0 transparent;
border: 0 none;
color: #145D94;
float: left;
font-size: 13px;
height: 26px;
line-height: 26px;
margin: 0 7px 0 0;
padding: 0 8px 4px 7px;
width: 266px;
}
精彩评论