How do I use CSS to reposition this image? - asp.net

Question

In this image you see two versions of the same elements. The top one is what I am getting, the bottom is what I want to end up with. Of course the bottom of the image is lined up with the text in the label and the text in the textbox, but I need it lined up with the textbox's box. I'm somewhat newbie at CSS, and the things I've tried so far do not get me even off the plate.
The controls are coded as follows:
<asp:Label ID="TimeTextRequiredLabel" runat="server" Text="*"></asp:Label>
<asp:Label ID="TimeTextLabel" runat="server" Text="Time: "></asp:Label>
<asp:TextBox ID="TimeTextBox" runat="server" ReadOnly="false" Width="100"></asp:TextBox>
<asp:Image ID="TimePickerImageButton" runat="server" BorderWidth="0"
Width="34" Height="21" CssClass="TimePickerImage"
ImageUrl="~/UserControls/Images/ClockPicker.gif"
ToolTip="Pick a time." />
What should be in my CSS, in the class "TimePickerImage" to scootch it leftwise and down the few pixels necessary?
Edited to Add:
Ultimately went with #JuanMendes solution, and this class:
<style type="text/css">
.TimePickerImage {
position: relative;
top: .2em;
right: .3em;
}
</style>
This snugs it in right exactly where I needed it. Thanks! Next task is to get serious with learning CSS. Thus far I've been playing script-kiddie with it.
Edited Further to Add:
I've tried all the other variations proposed by both #MarcAudet and #JuanMendes and the above code works best. I guess I don't care so much about comforming to some theoretical "ideal" as making the thing result in what I need.

Answer 1

You need to add or adjust the vertical-align: bottom declaration in #TimePickerImageButton
From your screenshots, it appears that the image is aligned with the baseline of the text line, the default behavior for an inline image.
vertical-align will take care of the vertical positioning.
To move the element to the left, try adjusting margin-left. However, check the margin on the input field since it may have a margin, and also look for some white space between the input field and the image.
Demo
If you have the following HTML:
<div class="parent ex2">
<label for="the-time">Time:</label>
<input id="the-time" type="text">
<img src="http://placehold.it/30x25">
</div>
and apply the following CSS:
.ex2 img {
vertical-align: bottom;
}
You will see the positioning that you want.
Fiddle: http://jsfiddle.net/audetwebdesign/2PkUF/
If you have tall lines...
If you apply a larger value for line-height: 4.0, aligning elements to the bottom of the line box may look goofy.
You can also try vertical-align: text-bottom which should work.
See Example 3 in the demo.

Answer 2

You can always cheat and position the image yourself fudging values until it lines up(if you can't find a nicer way) http://jsfiddle.net/vTCHW/
Tested in FF, IE 8/9 and Chrome
img {
position: relative;
top: .3em;
}
You mentioned that Marc's answer is almost good enough. I think that is a better solution. You can make all three line up correctly by removing padding/margin from the input. http://jsfiddle.net/vTCHW/1/ Note that many people use a CSS reset system that would have taken care of the margins/paddings for you
img {
    vertical-align: bottom;
}
input {
padding: 0;
margin: 0;
}