button links not aligning properly in side category box

[dellvostro]

I just finished changing my text links in side category box to have background buttons that change on rollover. It works well, however there is space in between each button as in attached image. How can I make these position flush one right under each other without any spacing?

Id also like to make the button a couple more pixels left aligned so its flush right to side category box border.

Im not sure i even need all the lines of code like margin, padding, etc. Im still figuring this out as I go along.

Here's the code from stylesheet affecting these buttons:

/* categories box parent and child categories */
A.category-top, A.category-top:visited {
	color: #ffffff;
background-image: url(/images/button-bk.jpg);
background-repeat: no-repeat;
display: block;
width: 180px;
height: 33px;
margin: 0;
margin-bottom:0px;
padding: 0; 
	text-decoration: none;
	font-weight: bold;
	line-height: 20px
	}
	/*Im adding a new hover to try and add a background color button effect*/
	
	A.category-top:hover {
	color: #cccccc;
background-image: url(/images/button-bk-over.jpg);
background-repeat: no-repeat;
display: block;
width: 180px;
height: 33px;
margin: 0;
margin-bottom:0px;
padding: 0; 
	background-color: 000000;
	text-decoration: none;
	font-weight: bold;
	line-height: 20px
	}

[gjh42]

Have you eliminated the <br /> after the category name output?
(In /includes/templates/your_template/sideboxes/tpl_categories.php.)

That is required for the stock inline link elements to display correctly, but causes the gap when displaying as block or list-item.
You could look at the Categories Dressing code if you want more pointers.

You can add

margin-left: -3px;

to move the button edge (adjust to taste).

[gjh42]

Also, you don't need to include any properties in the
A.category-top:hover {
rule unless they are different from the plain version (e.g. background-image:).

[dellvostro]

Worked great! Thanks Glenn