So, you know how to use a graphic for your <input> submit button, right? Well, have you ever had trouble getting that graphical submit button to line-up with your <input> text field when both are side-by-side on the same horizontal line?
It can be a frustrating issue for any web standards advocate trying to bring a designers design to life … it should work, but why won’t it!? Playing with the margins and paddings don’t help and using absolute positioning just seems unnecessary. Well, thankfully the fix is easy and quick! Just give it a little class.
.submit { vertical-align: middle; *vertical-align: text-bottom; }
Simply give your <input> tag a class and within your CSS, assign that class’s “vertical-align” property. And like magic, all is right in the world.
This may be old news for many of the hard-core CSS nerds in the house — but I know this is an issue that plagues many front-end developers still. I was actually using the absolute position method up until a few months ago when Alex slapped this fix on me — who would have thought “vertical-align”!
A dude...
November 27th 2007
I had this very problem and i was googling for an answer! now here it is!
Martin Ringlein
November 27th 2007
Oh the power of Google! Glad it could help. I noticed a front-end developer struggling with it back at DC Start-up Weekend and thought the world needed to know!
taylan
November 27th 2007
I have this problem after a few days, thank u..
Martin Ringlein
November 27th 2007
Glad this little post is helping … vertical-align is such an odd solution; not intuitive at all that it would be the fix.
Nik
November 27th 2007
Thank you thank you Thank you Thank you. You have no Idea how much annoyance this bug has caused me in the past.
South Creative
November 27th 2007
I never even thought of using vertical-align on inputs. Thanks!
Martin Ringlein
November 27th 2007
Nik and South Creative, very welcome.
Again, we don’t pretend to know everything about CSS (even though it feels like Alex and John do know it all at times). But, we saw something displaying wrong at default that didn’t make sense and we knew doing some trick hackery (like absolutely positioning the element relative to the form) was wrong, even if it worked and was quick.
Alex figured this one out a long time ago, but the issue plagues so many people still.
In Davis
November 27th 2007
The best solutions are the simplest ones. Thanks a bunch.
Ash
March 8th 2009
Thanks a ton !!
kivig
July 9th 2009
Solved this a few times but couldn’t remember how. Thanks :)
Jason
August 12th 2009
Excellent, works a treat.
lee
April 16th 2010
Thank you so much! Now this really works! Have been beating my computer for hours to try and fix this. I could kiss you!
Nina
May 11th 2010
These little things can always drive me crazy.
Thanks!
Ben
May 19th 2010
Thanks I’ve been looking for this!
T
May 19th 2010
<MARQUEE WIDTH=100% BEHAVIOR=ALTERNATE>Thank you!</MARQUEE>
Mark
July 15th 2010
Is there a cross-browser solution? it seems that FireFox and IE interpret this differently. FireFox looks correct when I use “vertical-align:0” (or leave it out) and IE8 likes “vertical-align:-1” or “vertical-align:text-bottom”.