CSS Rollover Always Forces New Line Problem

[Mav3000]

Hi, I'm using CSS to create an image rollover. However, everytime I use it the image rollover is shown on the line below where I need it!

I have a page where I have an input box and next to it I need the rollover image. However, when I add the rollover image, the image is displayed on the line below the input box - not next to it as needed.

------------------------

My CSS code is:

a.RolloverCalendar {
display: block;
width: 17px;
height: 16px;
background: url("images/rollovers/Calendar.png") 0 0 no-repeat;
text-decoration: none;
}

a:hover.RolloverCalendar {
background-position: -17px 0;
}

a:active.RolloverCalendar {
background-position: -34px 0;
}

-------------------------------------

My HTML Code is:

<td width="150" align="left"><input type="text" id="TB2" name="TB2" class="textboxdate"/><a class="RolloverCalendar" href="#" title="Click To Select Date"></a></td>

-------------------------------------

Any help as to what I'm missing to keep both of these objects on the same line would be greatly appreciated. My table row height is 16 pixels.

Thanks, Richard