CSS mouse overs

[nate51]

I have mouse over images for the purpose of using 2 image files on multiple buttons but using html text for the button text.

I have an issue though where the text is falling to the absolute bottom of the image and I am not able to middle align it or center it. This is my css code...



body {
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
}
#sidebar {
vertical-align: none;
width: 268px;
}

#sidebar .lpc{
height: 100px;
vertical-align: middle;
}

#sidebar ul {
margin: 0;
padding: 0;
padding-top: 0px;
}

#sidebar li {
list-style: none;
}

#sidebar li a {
display: block;
font-size: 14px;
color: #556b76;
padding: 7px 7px 0px 30px;
background-image: url(images/btn.jpg);
}

#sidebar li a:hover {
display: block;
background-image: url(images/btno.jpg);
}

#sidebar li a.selected, a.selected:hover {
display: block;
color: #820032;
background-image: url(images/btn.jpg);
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}


Can anyone help me here? I can imagine the fix is simple I am just not noticing it.


-- Nate

[Nile]

Put some padding-bottom on the link. Start it at around 10px, then keep increasing it till it reaches the middle, or the part of the link that you want the text at. :D

[Medyman]

@Nate...

If Nile's suggestion doesn't work for you, post the HTML that you're trying to use. I'm not sure I understand what you mean here.

[mattpowers]

You can center text by setting the line-height. So if your buttons are 100px tall, this might work:

#sidebar li a {
line-height: 100px;
display: block;
font-size: 14px;
color: #556b76;
padding: 7px 7px 0px 30px;
background-image: url(images/btn.jpg);
}

Also I'm pretty sure vertical-align tags do absolutely nothing, unless you're working with a table.

It would help to see your HTML though.
Hope that helps.

[rangana]

You can center text by setting the line-height. So if your buttons are 100px tall, this might work:

#sidebar li a {
line-height: 100px
display: block;
font-size: 14px;
color: #556b76;
padding: 7px 7px 0px 30px;
background-image: url(images/btn.jpg);
}


...but throws an error on CSS validation since you're missing ";".

[mattpowers]

You are correct, the post has been edited :)

Although I think it's more than a validation error, unless it's the last line in a bracket.