/    Sign up×
Community /Pin to ProfileBookmark

aligning image in a form

Hello. I’m trying to create a calendar like you see on most hotel websites where you might make a reservation. I have three select boxes (one each for month, day, and year). And, I’m trying to add a calendar icon to the right where the user can click on it and be able to click on the day. However, when I place the image next to the third select box, it appears to be off centered vertically. The image hugs the top margin while the select box next to it appears vertically centered. Here is a zoomed in print screen of what I’m talking about:
[url]http://i42.photobucket.com/albums/e322/Violinssoundcool/calendaralignment.jpg[/url]

Here’s the context of the rest of the page:
[url]http://i42.photobucket.com/albums/e322/Violinssoundcool/calendar2.jpg[/url]

Here’s the HTML:

[CODE]
<form name=”EquipmentNumber” action=”http://sabel/cgi-bin/FM0001D”>
<div style=”width: 650px; text-align: left; margin-left: 25px;”>
<div style=”width: 500px; height: 30px;”>
<div style=”float: left; width: 200px;”>
Purchase/Lease Date:
</div>
<div style=”width: 250px; float: left; padding-top: 1px;”>
<select name=”HPLMonth”>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
<option value=”6″>6</option>
<option value=”7″>7</option>
<option value=”8″>8</option>
<option value=”9″>9</option>
<option value=”10″>10</option>
<option value=”11″>11</option>
<option selected value=”12″>12</option>
</select>
<select name=”HPLDay”>
<option value=”1″>1</option>
<option selected value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
<option value=”6″>6</option>
<option value=”7″>7</option>
<option value=”8″>8</option>
<option value=”9″>9</option>
<option value=”10″>10</option>
<option value=”11″>11</option>
<option value=”12″>12</option>
<option value=”13″>13</option>
<option value=”14″>14</option>
<option value=”15″>15</option>
<option value=”16″>16</option>
<option value=”17″>17</option>
<option value=”18″>18</option>
<option value=”19″>19</option>
<option value=”20″>20</option>
<option value=”21″>21</option>
<option value=”22″>22</option>
<option value=”23″>23</option>
<option value=”24″>24</option>
<option value=”25″>25</option>
<option value=”26″>26</option>
<option value=”27″>27</option>
<option value=”28″>28</option>
<option value=”29″>29</option>
<option value=”30″>30</option>
<option value=”31″>31</option>
</select>
<select name=”HPLYear”>
<option value=”1998″>1998</option>
<option value=”1999″>1999</option>
<option value=”2000″>2000</option>
<option value=”2001″>2001</option>
<option value=”2002″>2002</option>
<option value=”2003″>2003</option>
<option value=”2004″>2004</option>
<option value=”2005″>2005</option>
<option value=”2006″>2006</option>
<option value=”2007″>2007</option>
<option selected value=”2008″>2008</option>
</select>
<img src=”/IMG_Maintenance/calendar.jpg”>
</div>
</div>
</div>
</form>
[/CODE]

…and here’s the inherited CSS:

[CODE]
body
{
text-align: center;
font-family: arial;
}
[/CODE]

I was just wondering if there was something in my CSS that was throwing off the alignment.

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@infinityspiralDec 04.2008 — Doesn't look like the image has the same height as the box which is okay because the box size seems to change with different browsers. Couple things to try in CSS: try setting the image style to position:relative; top:2px; you could also try margin-top:2px;
Copy linkTweet thisAlerts:
@javawebdogDec 04.2008 — Add this to your style

img{vertical-align: middle;}
×

Success!

Help @violinssoundcoo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...