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

I ran into the same. I was able to solve my issues, pushing padding from the bottom (!)

padding: 0 0 2px 0; /* total height: 36px */
height: 34px;   

or, in a bigger picture, if you fancy consistent input['..'] and anchor button, use distinct overriding tweaking for the latter for full control.

/* general button styling for input and anchor buttons */
.buttonXS, .buttonS, .buttonM, .buttonL  {
    display: block;
    font-size: 14px;
    line-height: 14px; /* just a precaution, likely ignored in FF */

    padding: 0 0 2px 0; /* total height: 36px */
    height: 34px;   
    ...
}

/* distinct vertical align for anchor buttons */
a.buttonXS, a.buttonS, a.buttonM, a.buttonL  {
    padding: 12px 0 0 0; /* total height: 36px */
    height: 24px;
}

(the 'T-shirt-sizes' lead to different background-offsets and widths elsewhere)

Answer 2

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 <input type="submit"/> into a <button type="search" title="Tooltip">Label</button> 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 <div class="btnwrap" />.

.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 <span/> 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!

Answer 3

I had something like this happen earlier this week - I found out that you have to apply certain ccs elements to the 'parent' element instead of the 'child'. So basically try some of the css like vertical-align: in the .searchform div.

Meanwhile, I'm having trouble with my search icon at smartemini.com. It works in aaaaallllll browsers except ie9. :(

Answer 4

This problem only happens on Firefox 4/Win7 with DirectWrite enabled render mode (which is enabled by default). Firefor4 GDI render mode is working properly.

It might caused by the vertical-align attribute is baseline. But the baseline of U1F50D sin't on the lowest point. Maybe you should try to move the font points a little higher, set the lowest point's y point to 0.

Answer 5

I came to the same conclusion as Renesis, though I wasn't sure whether Firefox wasn't respecting line-height or vertical-align. Here is the outline to a different solution that allows you to continue to use your fancy glyph. Since you are using pixel-sizes for your button, try something along these lines (simplified html). This might be overkill, and a background-image would almost certainly be more appropriate, but anyway.

The simplified html:

<div class="searchform">
  <input type="search" placeholder="search" name="s"  />
  <span><input type="submit" value="&#128269;" title="Search" /></span>
</div>

And the simplified css:

// hide the border and background for the submit button
.searchform input[type="submit"] {
  border: none;
  background: transparent;
}
// give the span the properties that the submit button has now
span {
  position: relative;
  width: 30px; // or whatever
  height: 30px; // or whatever
}
// absolutely position the submit button
.searchform input[type="submit"] {
  position: absolute;
  margin-top: -15px; // half the span height
  margin-left: -15px; // half the span width
  top: 50%;
  left: 50%;
  bottom: 0;
  right: 0;
}

Answer 6

FF4 sets it's own styles on input elements. You can check all of them if you paste this in your URL field:

resource://gre-resources/forms.css

Alternatively you can see this styles if you check Show user agent CSS from Style tab dropdown if you have Firebug instaled.

Check solution here: How to reset default button style in Firefox 4 +