aligning text in ul to top of image
Hi,
I have three entries in a ul that reveal a picture when you mouseover them, using the line-height property. Here is the css:
ul
{
border: 3px solid gold;
background:black;
float:left;
display:block;
}
li a
{
font: 12px tahoma;
color: gold;
width:100%;
text-decoration:none;
}
li a:hover
{
vertical-align:top;
color:black;
background:gold;
line-height:18;
}
.Paul a:hover
{
background-image:url(paul saunders.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
.Sarah a:hover
{
background-image:url(Sarah Chilcott.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
This is the HTML:
[list]
<li class = "Paul"><a href = "#">Gareth Rayworth - CSC General Manager</a></li>
<li><a href = "#">Amanda Hartley - CSC Call Centre Manager</a></li>
<li class = "Sarah"><a href = "#">Sarah Chilcott - P.A. To Gareth Rayworth</a></li>
Its a long shot but is there anything I can add to the hover classes, to make the text in the ul tag move to the top of the background-image?
Thanks in advance
Joe
__________________
\'sync\' <cr>
The name specified is not recognized as an internal or external command, operable program or batch file.
|