Vertical navigation bar

[Sirax]

Ok here's another question from me :)Sorry for all my maybe n00bish questions but I'm still learning CSS...I have been making a vertical navigation menu on the left of the page... you can view the result so far by clicking HEREAs you can see, the (again) hover effect is not 100% correclty...This is what I mean... CLICK HEREAs you can see the hover image is not well-placed and also the dashed border when you click on a link is larger then the button is...This is the code:HTML

<div class="header"><h1>General</h1></div><ul class="navigation"><li><a href="#">Home</a></li><li><a href="#">News Flash</a></li></ul>

CSS

body {	margin-left: 0px;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;}h1 {	font-family: Arial;	font-size: 11px;	font-weight: bold;	font-style: normal;	text-align: left;	color: #000000;	padding-top: 3px;	padding-left: 3px;}ul {	list-style-type: none;	margin: 0;	padding: 0;}.header {	background-image: url(nav_header.png);	background-position: left center;	background-repeat: no-repeat;	height: 20px;	width: 174px;}.navigation li {	background-image: url(nav_bar.png);	background-position: center;	background-repeat: no-repeat;	color: #999999;	display: block;	font-family: Arial;	font-size: 11px;	font-weight: normal;	font-style: normal;	text-align: left;	height: 20px;	width: 174px;}.navigation li a {	color: #999999;	display: block;	text-decoration: none;	height: 20px;	width: 174px;	padding-top: 3px;	padding-left: 3px;}.navigation li a:hover {	background-image: url(nav_hover.png);	background-position: center;	background-repeat: no-repeat;	height: 20px;	width: 174px;}

Does somebody know what I'm doing wrong here?

[phpnoob]

You padding the left for A href on .navigation li a", that why doing this, you need to modifying the .navigation li a:hover width to 171px or better take the padding-left outm or take out the A from .navigation li a:hover

[Sirax]

But the padding left on .navigation li a" I used the position the text away from the browsers border.And what do you mean with this: take the padding-left outm or take out the A from .navigation li a:hoverJust remove that a, so it become like this... .navigation li :hover , like this?EDIT: Ok I removed the padding-left and padding-top in .navigation li a {Now the buttons are ok and also the hover effect is ok, but now the text issent centered anymore in the button... How can I fix that?

[phpnoob]

But the padding left on .navigation li a" I used the position the text away from the browsers border.And what do you mean with this: take the padding-left outm or take out the A from .navigation li a:hoverJust remove that a, so it become like this... .navigation li :hover , like this?EDIT: Ok I removed the padding-left and padding-top in .navigation li a {Now the buttons are ok and also the hover effect is ok, but now the text issent centered anymore in the button... How can I fix that?

If you don't like that, than put it the paddings back and modifying the width on .navigation li a:hover to 171px

[Sirax]

When I do it like you say, I get this... HERESo now the text is fine but the hover effect is smaller and the dashed border when clicking is also to big...

[ShadowMage]

Ok I removed the padding-left and padding-top in .navigation li a {Now the buttons are ok and also the hover effect is ok, but now the text issent centered anymore in the button... How can I fix that?

Try using text-align. You really shouldn't use padding to center text anyway.

[Sirax]

I don't think it's able to use text-align to center the text in height? Issen't it only used for left, center or right?Or do I miss something?

[Synook]

I can't reach your testing page, but try increasing the line-height to match the height.