skip to main content ↓

nclud is a creative web design agency bringing the web together through unique, stylish, and usable designs.

<July 2008 
SunMonTueWedThuFriSat
  12345
6789101112
13141516171819
20212223242526
2728293031  

Subscribe to our RSS Feed.

Archived Thoughts

CSS fix for Graphical Input Submit Button Off-Set

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?

Input Submit Button CSS Issue

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.

Input Submit Button CSS Fix

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”!

Posted by Martin Ringlein on November 26, 2007 | Permanent Link |

Comments

  1. # On Nov 27, 05:54 PM A dude... said:

    I had this very problem and i was googling for an answer! now here it is!

  2. # On Nov 27, 07:00 PM Martin Ringlein said:

    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!

  3. # On Nov 29, 12:58 PM taylan said:

    I have this problem after a few days, thank u..

  4. # On Nov 29, 02:50 PM Martin Ringlein said:

    Glad this little post is helping … vertical-align is such an odd solution; not intuitive at all that it would be the fix.

  5. # On Nov 30, 04:56 AM Nik said:

    Thank you thank you Thank you Thank you. You have no Idea how much annoyance this bug has caused me in the past.

  6. # On Dec 1, 01:20 AM South Creative said:

    I never even thought of using vertical-align on inputs. Thanks!

  7. # On Dec 1, 06:39 AM Martin Ringlein said:

    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.

  8. # On Dec 20, 12:21 AM In Davis said:

    The best solutions are the simplest ones. Thanks a bunch.

Commenting is closed for this article.