Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Aligning <select> field and <img>

Status
Not open for further replies.
southbeach

southbeach

Programmer
Jan 22, 2008
879
US
I have an image 20x20 GIF and a simple <select> tag as a mean to select a customer and submit form (the image is the submit button).

The image appears slightly higher than the combo box. How can I make the image centered or aligned with the combo box field?

Thank you all in advance!
 
Sort by date Sort by votes
here is the code
Code: 
<body bgcolor="#191970" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" bottommargin="0">

<div id="reports" class="search" style="width: 100%; height: 100%">

<center><h2>REPORTS</h2></center>
<center>
<form name="rpt1" action="?rpt=1" method="post">
      <table width="480px" border="0" cellpadding="0" cellspacing="0" class="search">
        <tr style="background-color: #000; color: #FFF;"> 
          <td> WR Report </td>
        </tr>
        <tr> 
          <td> 
            <select &nbsp; style="width: 340px;" name="customer" id="customerID" onFocus="javascript:this.className='wef';" class='normal' onBlur="javascript:this.className='normal'; this.value=this.value.toUpperCase();" onChange="javascript: document.getElementById('custidID').value=this.value; xajax_SelectShipAddress(this.value,'JS');"><option value="NONE">Please select a customer</option><option value="1">Customer 1</option><option value="2">Customer 2</option><option value="3">Customer 3</option><option value="4">Customer 4</option><option value="5">Customer 5</option><option value="6">Customer 6</option><option value="8">Customer 7</option></select>            &nbsp;&nbsp; <input type="image" src="images/btnsquarertArrow.gif" border="0" onClick="submit();" /> 
          </td>

        </tr>
        <tr> 
          <td>&nbsp;&nbsp;SELECT: 
            <input name="openonly" type="checkbox" id="openonly" value="1">
            Open ONLY 
            <input name="finalized" type="checkbox" id="finalized" value="1">
            Finalized ONLY </td>
        </tr>
        <tr> 
          <td>INCLUDE: 
            <input name="trknumbers" type="checkbox" id="trknumbers" value="1">

            Tracking #s 
            <input name="cnnumbers" type="checkbox" id="cnnumbers" value="1">
            CN #s 
            <input name="comminv" type="checkbox" id="comminv" value="1">
            Comm. Inv.
            <input name="detail" type="checkbox" id="detail" value="1">
            Detail</td>
        </tr>
        <tr> 
          <td></td>

        </tr>
        <tr>
          <td></td>
        </tr>
      </table>
</form>
</center>
</div>

Thanks,
 
Upvote 0 Downvote
You can use [tt]vertical-align[/tt] CSS command on both input types to move them up, down or to the middle of the line. Play with those settings until you get the result you want.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
764
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
203
lmcate
lmcate
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
627
PeDa
PeDa
jason.lex
  • Locked
  • Question
Bootstrap grid and columns question
Replies
0
Views
127
jason.lex
jason.lex
LyndonOHRC
  • Locked
  • Question
Can I select all child TD's using Parent TR's id?
Replies
5
Views
429
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top