CODEWITHSUNDEEP
htmlcssfirefoxbuttonpositioning
5ulo
5ulo

Reputation: 799

Positioning in HTML <button> tag

I'm trying to theme a search form with button and I have problem with text positioning in the button. Chrome and Opera are showing the button properly, but Firefox is not.

HTML:

<button type="submit"><span>Search</span></button>

CSS:

button {
    border: 0;
    background: red;
    padding: 0;
    width: 200px;
    height: 50px;
    position: relative;
}
button span {
    position: absolute;
    top: 0;
    left: 0;
}

In Opera and Chrome the span is at the top left corner. In Firefox the padding at top and left and the top position begins in the middle of the button height.

What am I doing wrong?

Live demo: http://doctype.n-joy.sk/button/

Thanks

Upvotes: 4

Views: 5109

Answers (3)

pmgodin
pmgodin

Reputation: 1

Found this in Twitter Boostrap reset.less file. It corrects this behavior.

button,
input {
    *overflow: visible; // Inner spacing ie IE6/7
    line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
    padding: 0;
    border: 0;
}

Note that comments are in less... not CSS so you have to replace // by /* ... */

Upvotes: 0

Arsen7
Arsen7

Reputation: 12840

It looks like you did everything correctly, but there is some dark magic emerging from the default styles of Firefox, and from some undocumented, hidden (pseudo-)elements attached to buttons.

I haven't yet found the rule which would help you with this button issue, but you may try to scan the default styles yourself. If you type in Firefox's address bar: resource://gre-resources/forms.css, then you will see one of its default stylesheets.

Some of suspicious selectors (just wild guesses) are: *|*::-moz-button-content or input > .anonymous-div. The second one does not seem to be defined for button, but who knows where else the magic lies?

In any case, I suppose, you might report it as a bug.

Upvotes: 1

f055
f055

Reputation: 1190

That's a strange one. Looks like Firefox is keeping some kind of proprietary padding inside of button element. The workaround I was able to implement was a FF-only piece of CSS with a rather ugly negative margin for the span... A quick fix really, maybe others can follow with something better.

button {
  background: red;
  border: 0;
  padding: 0;
  margin: 0;
}
button span {
  display: block;
  background: blue;
  width: 200px;
  height: 50px;
}
// FF only:
@-moz-document url-prefix() {
    button span {
        margin: -1px -3px;
    }
}

Upvotes: 3

Related Questions