Geek Answers Handbook

Positioning in the HTML <button> tag

I am trying to create a search form using button , and I have a problem with positioning text in button . Chrome and Opera show the button correctly, but Firefox doesn't.

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 icon is in the upper left corner. In Firefox, indents from the top and left and top position begin in the middle of the button height.

What am I doing wrong?

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

thanks

+4
source share
3 answers

This is weird. It seems that Firefox saves some proprietary add-ons inside the button element. The workaround I was able to implement was only part of CSS with FF, with a rather ugly negative margin for the range ... 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; } }
+3
source

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

I have not yet found a rule that will help you with this problem, but you can try to see the default styles yourself. If you type the address bar of Firefox: resource://gre-resources/forms.css , you will see one of the default stylesheets.

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

In any case, I suppose you can report this as an error .

+1
source

This is detected in the Twitter Boostrap reset.less file. He 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 the comments are less ... not CSS, so you need to replace // with /* ... */

0
source

More articles:


All Articles