开发者

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;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜