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.

[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.