Position of text in a submit button

36,816

Solution 1

I've deduced that the main trouble is the line-height property.

Both browsers attempt to vertically center all text on buttons. In combination with the height property, however, if there is not enough room to render the full standard line-height (glyph padding grows quite large with large font sizes), both browsers will pin the glyph to the top of the button, trimming the bottom.

Normally, the line-height would help adjust this, and in Chrome, in your example, this was successful. However, in the case of button and input type="submit" elements, Firefox ignores line-height altogether, so it can't be used in this way to "fix" the positioning of the character. Using the extreme example below, we can see that the text has been pushed out of visbility in Chrome, while it still stays right in the (vertical) center in Firefox.

<!doctype html>

<html>
<body>
<style type="text/css">
input {
    border:1px solid black; 
    line-height:1000px;
    height:40px;
}
</style>
<input type="submit" value="Test"/>
</body>
</html>

Firefox: Firefox Chrome: Chrome

When a button element is left to the native style (remove the border), line-height is ignored by both browsers (weirdly, Chrome also ignores the height but Firefox does not). As soon as the button is custom-styled, Chrome picks up the line-height but Firefox does not.


So what can you do?

If you still want to make use of CSS fonts...

  1. First of all, make sure your font renders the glyphs in the same vertical-alignment that a standard font displays a basic full-height character, like H. (It appears you've done this for the most part, since your page looks significantly better than the screenshots in the question.)
  2. Second, you'll notice that if you use a font like Arial, and display an H (at the same font size), it's also low. This is because the built in standard line-height of the font gives it quite a bit of room above the character. This indicates that you may have some success if you can edit the font to trim this, thereby giving the character enough room to not be trimmed at the bottom by the browser.
  3. Probably less ideal to you, but still an option, you can use other elements, either in combination with or in place of the button/submit element, to get the character into place.

Alternative option

I'm not sure what your goal is in using CSS fonts, but often it is for some form of progressive enhancement/graceful degradation. In this case, although (as you said in the comments) the special character is a standardized Unicode "right-pointing magnifying glass", it still will not have any meaning to the user if it doesn't render.

Given that the benefit of graceful degradation is to allow simpler technologies to display your website without appearing broken, the use of this character seems suspect — without CSS fonts or a native font with this character, it will render as 🔍 a ?, or simply a blank box.

A better option for graceful degradation, given this problem, would be to simply use a background-image. Make the text of the button "Search", hide the text (through CSS), and apply the background image, and then you have actual graceful degradation, and a fancy character for better browsers.

A background image could also (obviously dependent on the files themselves) have other benefits, such as faster load and render times (for instance, if a developer wanted to use a single character from a full-character-set font).

Solution 2

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 +

Solution 3

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

Solution 4

I had been facing a similar problem when using CSS inside buttons. The text was offset by 1 pixel in firefox, and rest of the browsers it was just fine. I used "padding" property specific to Firefox, in the following way

The original code in which the input button's text was one pixel lower in Firefox

.mybutton { 
    height:32px; background-color:green; 
    font-size:14px; color:white; font-weight:bold; 
    border:0px; -moz-border-radius:16px; border-radius:16px;
}

and after adding the Firefox specific padding after the above css, it was perfect in Firefox

@-moz-document url-prefix() {
    .mybutton { padding-bottom:1px; }
}

In your case, may be you need a bit more padding-bottom, and probably padding-top in negative too (-1px or -2px).

Solution 5

I came across this when I was looking for a solution to this problem, but since I never really found anything other than a hint at changing the padding bottom I wanted to share that I found adjusting the padding-bottom for just firefox worked great.

Every other browser allowed for enough line-height control to adjust the text positioning.

/* This gets picked up in firefox only to adjust the text into the middle */
@-moz-document url-prefix() {
    input[type="button"],
    input[type="submit"],
    button.btn {
        padding-bottom: 6px;
    }
}
Share:
36,816

Related videos on Youtube

Eli Grey
Author by

Eli Grey

Full-stack web developer and offensive security researcher

Updated on February 27, 2020

Comments

  • Eli Grey
    Eli Grey over 3 years

    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 lowering the font size of the text, which isn't an optimal solution as the text will be too small.

    Screenshots

    Firefox 4 on Windows 7:

    Firefox 4 screenshot

    Google Chrome 10.0.648.204 on Windows 7:

    Google Chrome screenshot

    The relevant HTML:

    <form method="get" class="searchform" action="http://eligrey.com/blog"> 
        <input type="search" placeholder="search" name="s" /> 
        <input type="submit" value="&#128269;" title="Search" /> 
    </form> 
    

    The relevant CSS rule (from http://eligrey.com/blog/wp-content/themes/eligrey.com/style.css):

    .searchform input[type="submit"] {
        font-family: "rfhb-lpmg";
        color: #ccc;
        font-size: 3em;
        background-color: #959595;
        text-align: center;
        border: 1px solid #888;
        height: 34px;
        width: 42px;
        line-height: 34px;
        -webkit-border-bottom-right-radius: 4px;
        -webkit-border-top-right-radius: 4px;
        -moz-border-radius-bottomright: 4px;
        -moz-border-radius-topright: 4px;
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding-box;
        background-clip: padding-box;
        -webkit-transition-property: border, background-color, box-shadow;
        -webkit-transition-duration: 0.2s;
        -moz-transition-property: border, background-color, box-shadow;
        -moz-transition-duration: 0.2s;
    }
    

    rfhb-lpmg is just a custom font I made which implements U+2767 rotated floral heart bullet and U+1F50E right-pointing magnifying glass with simplistic glyphs.

    • Ennea
      Ennea almost 11 years
      I believe this question has a more elegant solution to the problem. Just for the record!
  • Eli Grey
    Eli Grey over 12 years
    This doesn't help as it's text inside the submit button that needs repositioning, and not the submit button itself.
  • xusame
    xusame over 12 years
    +1: The graceful degradation note is good. I would definitely use this solution over my own, but wanted to find a workaround for the Firefox issue :)
  • Eli Grey
    Eli Grey over 12 years
    "the special character won't mean anything without CSS fonts" U+1F50E isn't a private use character. It actually means 'right-pointing magnifying glass' which implies search. Edit: Also, the character is not lower-set than normal fonts. Can you give me an example of a font that sets U+1F50E much higher? I have it right on the appropriate baseline.
  • Eli Grey
    Eli Grey over 12 years
    I think I will be modifying my font anyways though for Firefox.
  • Eli Grey
    Eli Grey over 12 years
    Also, "such as faster load and render times" are both incorrect. This two-glyph font is has a very light filesize (more so than an SVG or image) that I can fit in a very small data: URI, and the computations needed to render a single glyph have infinitesimal cost.
  • Nicole
    Nicole over 12 years
    @Eli I didn't want to clutter the comments here, so I incorporated some significant changes, given your responses, into the answer itself.
  • andig
    andig over 10 years
    Is the FF bug number known? It would help to vote on that bugzilla entry!

Related