Position of text in a submit button

Question

The position of the text on the search submit button on my blog is very low in Firefox 4, but not Chrome 10 or IE9. I\'ve tried almost everything, and nothing works except l

Answer 1

What you're seeing here is how differently browsers render text inside button elements when space is tight. Chrome centers the test vertically, while Firefox top-aligns it.

On top of that, you're using a home-made font, that might have some latent issues when it comes to vertical-height/leading/etc.

I note that when I add any other character to the input's value - the magnifying glass drops down even further in Firefox. This suggests that tweaking the font somehow (like vertical-position, or cropping away top/bottom white-space) might help.

If that fails you should change your into a Label element, and see if styling the button is any easier than styling the input.

If the problem still remains, you'll need to switch tactics and wrap your button in a

.

.searchform .btnwrap {
  display: inline-block;
  overflow: hidden;
  height: 32px;
  border: 1px solid #888;
  /* plus the border-radius styles */
}
.searchform button {
  /* all the original button styles, except the border */
  height: 50px;
  margin: -9px 0; /* (32-50)/2 = -9 */
}

(BTW, You can alternatively inner-wrap button text in a and do similar negative-margin hack to that, although I suspect that getting the vertical-centering is easier with the button inside adiv.)

That said, you really should just use a good old fashioned background image replacement - it will both render and load faster. :-)

Good luck!

0 讨论(0)

查看其它11个回答

发布评论:

提交评论

---

•  加载中...