5ulo 0


I'm trying to theme search form with button and i have problem with text positioning in the button. Chrome and Opera are showing the button all right, but Firefox doesn't. Look at the simple code bellow:

<button type="submit"><span>Search</span></button>
.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 is the span at the top left corner. In Firefox is padding at top and left and the top position begins in the middle of the button height. What I'm doing wrong?

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

Thanks in advance


  • Here is the demo: http://doctype.n-joy.sk/button/ 5ulo almost 8 years ago

3 answers


In the .button style, take out the position: relative; line altogether.

Answered almost 8 years ago by Abinadi Ayerdis
  • hmmm.. this is not goot solution.. look now on the demo (div#example1).. but if I wrap the button to another div with position: relative, I can make what i want.. see the code for div#example2 :) thank You for giving me this idea :) 5ulo almost 8 years ago
  • I see what you mean. But example 2, although not ideal, is at least functional and syntactically correct. Abinadi Ayerdis almost 8 years ago

Have you applied any CSS resets? Browsers have some basic css styles built in by default and each one is slightly different. Applying a CSS reset to all elements will get them to behave more alike.

Answered almost 8 years ago by Artistic Abode
  • Yes, i always use CSS reset before any other .css. This trick didn't work. 5ulo almost 8 years ago
Ktash 1851

Not sure what you're trying to accomplish with doing it this way, but I was able to accomplish the desired effect in FF with the following styles:

button span {
    position: relative;
    left: -3px;
    top: -1px;
    display: inline-block;

As for why this is happening, I'm not sure. I couldn't find anything in the code as the culprit. And from the looks of it, there isn't even white space around the span to account for the extra 3px on the left nor 1px on the top. Edit: So, there was a post here that details the extra space around the button, so you can remove the positioning pieces and just leave the inline-block setting to get the width and height set and that should work.

Answered almost 8 years ago by Ktash
  • This is solution if you want simple formated button, but if you want to 'play' with the button style, this isn't helpful. In another forum i got the answer, why is this happened in FF. It is bug and this bug was reported 3 years ago and still is not fixed. https://bugzilla.mozilla.org/show_bug.cgi?id=437722 5ulo almost 8 years ago