Sometimes you might want to mix text buttons with image buttons and insist on using the button tag. However, Firefox aligns the text buttons lower then the image buttons.
Test page Workaround is not included
Reported by: Laurens van der Klis.
Mozilla, Opera, Safari | Reported on 5 September 2007.
This site is no longer maintained. I’m sorry, but it’s just too much work for too little return. You can continue to browse old bug reports, though.
Search reports by browser:
2 Posted by Merri on 6 September 2007 | Permalink
Have you checked vertical-align? I see this kind of problems occur when there is a different alignment set between the buttons.
And yes, due to long work day I'm too lazy to start checking this myself (especially as I rarely have had a need for image buttons).
3 Posted by AntonN on 10 September 2007 | Permalink
If you add vertical-align property to (middle|top|bottom) to button{} element - all buttons align properly.
4 Posted by Adam on 10 March 2008 | Permalink
Alternatively, you can use:
img.yourButtonClass {vertical-align:text-bottom;}
This is slightly better since it is likely to cause alignment issues in other browsers.
5 Posted by Hans Schmidt on 20 March 2008 | Permalink
button {
vertical-align: bottom;
...
}
... solves that problem .
6 Posted by pinxi on 13 May 2008 | Permalink
adding vertical-align:bottom to the button doesn't work for IE7 and text-bottom doesn't work for safari (and both may distort your text baseline.)
Rather you should use:
button img{
vertical-align:bottom;
}
1 Posted by Martijn on 6 September 2007 | Permalink
I filed this as https://bugzilla.mozilla.org/show_bug.cgi?id=395116
Normally, if you want to see this kind of thing fixed in Mozilla, then you should file a bug on it.