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!
In Davis
November 27th 2007
The best solutions are the simplest ones. Thanks a bunch.
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.
South Creative
November 27th 2007
I never even thought of using vertical-align on inputs. Thanks!
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.
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.
taylan
November 27th 2007
I have this problem after a few days, thank u..
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!
Ash
March 8th 2009
Thanks a ton !!
Kim Kardashian nude
May 12th 2009
<a >Kim Kardashian nude</a> http://mograph.net/board/index.php?showuser=19959 - Kim Kardashian nude <a >Paris hilton nude</a> http://www.spike.com/blog/paris-hilton-nude/78688 - Paris hilton nude <a >Paris hilton Sex Tape</a> http://www.vivvo.net/forums/member.php?u=8199 - Paris hilton Sex Tape <a >JESSICA SIMPSON NUDE</a> http://isuzuforums.com/forum/member.php?u=6131 - JESSICA SIMPSON NUDE