Programming Help

Web Development



What's Here?

  • Members: 118,482
  • Replies: 434,475
  • Topics: 67,156
  • Snippets: 2,407
  • Tutorials: 638
  • Total Online: 963
  • Members: 55
  • Guests: 908

Who's Online?

Welcome to Dream.In.Code
Getting Help is Easy!

Join 118,482 Programmers for FREE! Ask your question and get quick answers from experts. There are 963 online right now! We've got more than 500 tutorials and 2,000 snippets. Join and find out why Dream.In.Code is the #1 programming help community on the internet! Registration is fast and FREE... Join Now!



Help to vertically center submit button

 
 Reply to this topicStart new topic

Help to vertically center submit button
King8654
post 16 Jul, 2008 - 02:34 PM
Post #1


D.I.C Head

Group Icon
Joined: 4 Mar, 2008
Posts: 89


My Contributions
Hey,

Have a search input box, and everything works good, but the submit button is not lining up perfectly with the form, its hanging a little higher, and looks messy.

CODE

                <form method=post>
                    <td align='center'>
                            <font size='2' color='#000033' face='Georgia,'Times New Roman',serif, sans-serif'>
                         
                        <input type='text' name='sch_req' />  
                        <input name='imageField' type='image' src='images/button.gif' onclick='this.form.submit()' valign='bottom' width='49' height='20'> 
                    </td>
                </form>
                </tr>
            </table>


IPB Image

Heres a pic of how the submit button is not lined up correctly. Any help would be much appreciated!
User is offlineProfile CardPM

Go to the top of the page


BetaWar
post 16 Jul, 2008 - 05:24 PM
Post #2


#include <soul.h>

Group Icon
Joined: 7 Sep, 2006
Posts: 1,642



Thanked 63 times

Dream Kudos: 1075
My Contributions
This i smore of a HTML/CSS question, but here is a possible solution for you:

CODE
<input name='imageField' type='image' src='images/button.gif' onclick='this.form.submit()' valign='bottom' width='49' height='20' style="margin-top: 2px;">


All I added was style="margin-top: 2px;", this may not be the correct value to get it positioned correctly, but it may be. Either way it is easy enough to change.

Hope that helps.
User is offlineProfile CardPM

Go to the top of the page

PsychoCoder
post 16 Jul, 2008 - 05:40 PM
Post #3


using DIC.Core;

Group Icon
Joined: 26 Jul, 2007
Posts: 7,897



Thanked 83 times

Dream Kudos: 8100

Expert In: VB, VB.Net, C#, SQL, ASP, ASP.Net, Web Development, HTML, CSS, Win32 API, Javascript, mySQL, J#, GDI, Boo.Net

My Contributions
Moved to HTML/CSS smile.gif
User is offlineProfile CardPM

Go to the top of the page

King8654
post 17 Jul, 2008 - 12:34 PM
Post #4


D.I.C Head

Group Icon
Joined: 4 Mar, 2008
Posts: 89


My Contributions
Sorry bout wrong category lol, seems im always doing that

About the code.

1.) It worked perfectly after changing it to 4px on my main index page, for changes the the px changed the position of the button.

2.) but on my request page, which uses the same button for another search function, adding the style code to it alters the position of the input form, and has no effect on the button.

Any ideas as to why??
User is offlineProfile CardPM

Go to the top of the page

BetaWar
post 17 Jul, 2008 - 12:56 PM
Post #5


#include <soul.h>

Group Icon
Joined: 7 Sep, 2006
Posts: 1,642



Thanked 63 times

Dream Kudos: 1075
My Contributions
Could you post screenshot/browser used, I am looking at it in IE 6 and it looks the same between the 2 pages.
User is offlineProfile CardPM

Go to the top of the page

King8654
post 17 Jul, 2008 - 02:33 PM
Post #6


D.I.C Head

Group Icon
Joined: 4 Mar, 2008
Posts: 89


My Contributions
IPB Image

Firefox 3
User is offlineProfile CardPM

Go to the top of the page

BenignDesign
post 17 Jul, 2008 - 08:45 PM
Post #7


Just a code monkey in a world full of jocks...

Group Icon
Joined: 28 Sep, 2007
Posts: 854



Thanked 2 times

Dream Kudos: 150
My Contributions
HTML
<html>
<head>
<style>
input.middle {vertical-align:middle;}
</style>
</head>

<body>
<input name='imageField' type='image' src='images/button.gif' class="middle" onclick='this.form.submit()' width='49' height='20' style="margin-top: 2px;">
</body>
</html>



Haven't tested this myself, but it might work!
User is offlineProfile CardPM

Go to the top of the page

Fast ReplyReply to this topicStart new topic
Time is now: 10/11/08 06:09AM
Invision Power Board v2.1.7 © 2008  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

Bye Bye Ads

Free DIC T-Shirt

T-Shirt Example

Related Sites

Monthly Drawing

Thumb Drive

Partners

Top Contributors

Top 10 Kudos This Month