css rollover image agggh please help

Hi

I am wanting to create a navigation menu that when i hover over the text link then the cell background image will be replaced by another image.

I have managed to change it but it is only the the actual link part of the text that the image changes behind , where as i want the entire cell image to change to another image when i rolloever the text link.

anyone got any help or advise for me on this one

here is my css:

_____________nav Cell________________{}

.linkcell{
background-image:url(images/index_04.jpg);
background-repeat:no-repeat;
background-color:#EBB3DA;
padding: 0px 15px;
vertical-align:middle;
color: #ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;}

.linkcell a{
background-color:#EBB3DA;
padding: 0px 12px;
color: #ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;}

.linkcell a:hover{
background-image:url(rollover/images/roll_04.jpg);
background-repeat:no-repeat;
padding: 0px 12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-weight: bold;
font-size: 10px;
text-decoration: none;}

.linkcell a:visited{
background-image:url(rollover/images/roll_04.jpg);
background-repeat:no-repeat;
padding: 0px 12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-weight: bold;
font-size: 10px;
text-decoration: none;}

 

Ok I have the images working fine but the text in the cell is situated at the top where as i need it in the middle.

Now the strange thing is , is when i remove the display:block; the text sits in the middle when i add the valign but the image rollover does not work and when i add the display:block the image rollover works but the text goes to the top

this is my css:

_____________nav Cell________________{}

.linkcell{
text-indent:18px;
height:21px;
width:266px;
background-color:#EBB3DA;
color: #ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;}

.linkcell a{
text-indent:18px;
display:block;
background-image:url(images/index_04.jpg);
background-repeat:no-repeat;
height:21px;
width:266px;
color: #ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;}

.linkcell a:hover{
text-indent:18px;
display:block;
background-image:url(rollover/images/roll_04.jpg);
background-repeat:no-repeat;
height:21px;
width:266px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-weight: bold;
font-size: 10px;
text-decoration: none;}

 

are you using tables or css layers to display the page?

if your using tables you can use <td align="center" valign="middle">ddd</td>

 

Hey there!
You can use .css to adjust it manually to the exactly location you desire! You can use this tag to adjust how far the text is from the top:
padding-top: 9px;

Good luck!

 

thanks i got it sorted by adding

line-height:20px;

it is now perfect