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
Here’s the context of the rest of the page:
[url]http://i42.photobucket.com/albums/e322/Violinssoundcool/calendar2.jpg
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>
…and here’s the inherited CSS:
[CODE]
body
{
text-align: center;
font-family: arial;
}
I was just wondering if there was something in my CSS that was throwing off the alignment.