CSS Image Rollover Defaults to Top of Table Cell

[Mav3000]

Hi, I am using IE6 for a database front-end.

I have an image rollover with the CSS code:

a.RolloverEdit {
display : block;
width : 23px;
height : 23px;
background : url("images/rollovers/Edit.png") 0 0 no-repeat;
text-decoration: none;
}

a:hover.RolloverEdit {
background-position: -23px 0;
}

a:active.RolloverEdit {
background-position: -46px 0;
}

Which is used to show a rollover image in a table as follows:

<table class="DataTable" cellspacing="0" cellpadding="0" border="1">
<tr class="textlightgray" height="16">
<td width="23" align="right" valign="bottom"><a class="RolloverEdit" href="#" title="Edit Details"></a></td>
</tr>
</table>

The table row is to be 16px high (which is specified in the TR tag, but the CSS makes the image sit at the top of the table cell and push the height of the row up further than 16px.

This is extremely annoying! Could anyone please help me out?

Richard

 

[BillyRayPreachersSon]

Why are you putting a 23px high bg image in a 16px high cell Why not make the two equal if they're not looking good?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Mav3000]

Sorry - please see amended problem below...

 

[Mav3000]

Ok... Apologies for the incorrect problem above. This is a genuine problem I have with similar code...

CSS:

a.RolloverCalendar {
float : right; /*--Float keeps rollover on same line as tbx--*/
width : 17px;
height : 16px;
vertical-align : top;
background : url("images/rollovers/Calendar.png") 0 0 no-repeat;
text-decoration : none;
}

HTML:

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

Problem - I need the 16px high image to sit at the bottom of the table cell. At the moment, it is noticably raised from the bottom of the table cell, despite the table cell and tabe row being set to 16px high and valign="middle".

Could anyone tell me why a 16px high image in a 16px high row is raised from the bottom of the row?

Thanks, Richard

 

[Mav3000]

Changing the CSS to read "vertical-align: top;" has no effect.

 

[Mav3000]

I can get the image to the bottom of the cell if I use:

"float: bottom;"

but this overrides the 'float: right;" I had previously which makes the text box appear on top of my input box.

 

[system9898]

maybe the background-position property fit your needs?

http://www.w3schools.com/css/pr_background-position.asp

 

[traingamer]

Or maybe you could try adding:

margin: 0px;
padding: 0px;

to your css.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[Mav3000]

Hi,

Thanks very much for your replies. I have experiemented with adding both ideas to the RolloverCalendar CSS but neither work.

I don't understand it - the table row height is 16px, the image is height 16px and the input box which is next to the image has the CSS "font-size 8pt".

I need the rollover image to site on the bottom of the cell level with the bottom of the input box - but instead it sits upon the top...

Richard

 

[BillyRayPreachersSon]

You're missing a colon in your CSS for the input font-size, and "float: bottom" isn't valid. Can you post your code as it stands now?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Mav3000]

Here's my current code:

HTML:

<table class="DataTable" cellpadding="0" cellspacing="0">

<tr class="FieldRow">
<td class="Label">Job Received</td>
<td class="Field">
<a class="RolloverCalendar" href="#" title="Click To Select Date"></a>
<input type="text" id="TB1" name="TB1" class="textboxdate"/></td>

<td width="10"></td>

<td class="Label">Added To MobiTrak</td>
<td class="Field">
<a class="RolloverCalendar" href="#" title="Click To Select Date"></a>
<input type="text" id="TB2" name="TB2" class="textboxdate"/></td>

<td width="10"></td>

<td class="Label">Added By</td>
<td class="Field">
<input type="text" id="TB3" name="TB3" class="textbox"/></td>
</tr>
</table>


CSS:

table.DataTable {
width : 100%;
border-width : 0px;
font-family : arial;
font-size : 8pt;
}

tr.FieldRow {
height : 16px;
color : #333333;
vertical-align : middle;
}

td.Label {
width : 110px;
text-align : left;
}

td.Field {
width : 130px;
text-align : left;
}

a.RolloverCalendar {
float : right;
width : 16px;
height : 15px;
vertical-align : bottom;
background : url("images/rollovers/Calendar.png") 0 0 no-repeat;
text-decoration : none;
}

 

[Vragabond]

Given that tables (rows and cells) expand to fit their contents you should not expect your cells to be as high as you tell them when they have some contents inside. I would start looking at the text that might produce that gap. It is probably the input field. Here's a few things you should note:

1. IE6 is very allergic to white-space and will render it, even when between tags. That means that it will make a little space for every enter or space in your code. So make sure you remove all white-space between your tags from beginning <td> to the closing </td>.
2. Input elements are (as opposed to the anchor) subject to vertical-align property. Try vertically aligning the input element to make it work with the button.
3. Similarly, <td> elements also accept vertical-align and if you try aligning to bottom, you might be ok.
4. Given that you're clearly trying to have button to the right of the input field, have you tried floating both of them?
5. Don't ever put things in your code because you think they might work. Read up on float and see that you can have none, left or right values for it, don't make up value bottom, just because you think it would fit there.

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

 

[Mav3000]

Hi,

I've tried all of the ideas listed in the reply above to find that floating the input box brought it into alignment with the rollover icon. They are vertically aligned with each other (changing the valign of the cell doesn't affect this) however this is sufficient to achieve the layout I needed.

Thanks very much for your help,

Richard