Input Image Alignment Issues

Discussion in 'CSS' started by audax, Jan 10, 2009.

  1. #1
    Hello,

    I'm having trouble getting the alignment right on a login form for a website I'm currently working on. For some reason, the submit button (an image) is being vertically aligned above the input fields. I can't seem to find the problem. Whenever I try to manually align the button down via CSS and margins, it realigns the entire form. Any ideas? The test code is below:

    <html>
    <head>
    <title>Test</title>
    <style type="text/css">
    .logform{
    	padding: 0;
    	display: inline;
    }
    
    .logform input{
    	background: #fff url(images/inputbg.jpg) no-repeat;
    }
    
    .inpad{
    	padding: 0;
    	margin: 0 2px;
    	border: 1px solid #000;
    	height: 20px;
    	width: 125px;
    }
    
    .submit{
    	border: 0;
    	height: 20px; 
    	width: 31px;
    }
    </style>
    </head>
    <body>
    Login: <form method="post" action="#" class="logform"><input type="text" name="username" value="Username" class="inpad" /><input type="password" name="password" value="Password" class="inpad" /><input type="image" src="images/logsub.png" alt="Login" class="submit" /></form>
    </body>
    </html>
    Code (markup):
    The image for the button is:
    [​IMG]

    The resulting form looks like:
    [​IMG]

    Don't mind the background on the input fields, I just haven't uploaded that yet to the test version so it's not on there. Should be only aesthetic though.
     
    audax, Jan 10, 2009 IP
  2. markupdude

    markupdude Peon

    Messages:
    215
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Does vertical-align:middle; on both the classes help?
     
    markupdude, Jan 10, 2009 IP
  3. loveprone

    loveprone Banned

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Quick Relief: Add "vertical-align: top;" to the ".submit" class.
     
    loveprone, Jan 10, 2009 IP
  4. audax

    audax Peon

    Messages:
    83
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    This worked for me. Thanks a ton!
     
    audax, Jan 10, 2009 IP