I'm using a <button> to submit a form on a website I'm building. You can see it here

On the other pages I use a certain link style with sliding doors, and I'd like to use it for the submit on this form. I realised I couldn't reproduce the effect with an <input>, so I decided to use a <button>.

My problem is that whilst it works in Safari Mac and Opera Mac, Firefox 3.5 Mac and Chrome Win render the button differently. There's a gap to the right of the <span>, and it also appears to be down a pixel? It may even be a half pixel, if that possibly makes sense..

I've tried line-height and vertical-align but I've had no luck. Firebug's usually my saviour in these situations, but even that's failed me!

The problem button is on the Hearing Tests page

1 answer

2
points

That gap is due to the padding right being more than the width of the image (I see this in Firefox 3.5 mac as well). The one pixel effect is documented here but only for Webkit. But I see that effect on my Firefox 3.5 as well. The fix for that is:

button span {
margin-top:-1px;
}
Answered about 7 years ago by Divya Manian
  • Thanks for your advice so far Divya, Won't that then ruin the buttons appearance in the browsers that were already rendering it okay? Russell Bishop about 7 years ago
  • I cannot figure out why a <button> span does not render correctly in Firefox 3.5! I never used sliding doors on buttons before. If it does not seem too hacky, you could try doing the same effect using two spans inside or outside of the button element? Or use one of the <a href="http://davecardwell.co.uk/javascript/jquery/plugins/jquery-browserdetect/">js browser detection</a> to solve it specifically for Win browsers. Divya Manian about 7 years ago
  • Yeah it has me a little confused also. Maybe I'll look for an alternative method of doing this.. Russell Bishop about 7 years ago