CSS Image Rollover Won't Stay on Same line!

[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. The input box is 120px in width. The image is 17px wide.

Any help would be greatly appreciated!

Thanks,

Richard

 

[Vragabond]

You have the link displayed as a block. That means that it will go into the next line. If you take away the block, your width and height will no longer apply, since inline elements (links by default) cannot have width or height. So, what you have to do is float the anchor and put it before the input box in the html code.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[Mav3000]

Thanks very much for the reply. I understand what you are saying, but don't know how to float the anchor point before the input box, but have the rollover appear after the input box.

Could anyone supply any sample code that achieves this?

Thanks,

 

[Vragabond]

1. Float it to the right. If you are in a country that reads from left to right, then right floated anchor will be to the right of the input box, which will equate to after the input box.

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

2. In your HTML, switch the two elements around:

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

Note that I took out the display, since you do not need it, as all floated items are displayed as blocks by default. I would however warn you that your links are completely empty, so someone seeing your page without CSS will not be able to push anything.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[Mav3000]

Thanks very much - this is for an internal database interface for users who are all on Win 2000/XP and Internet Explorer, with CSS enabled, so there is no worries about the empty links.

I've finally moved away from Javascript rollovers and am getting to grips with the power of CSS.

Thanks very much for your help,

Richard