background image height cut - css

Question

I´m trying to figure out why the background image on my a:selected class is being cut both bottom and top. I´ve tried assigning height:!important; and min-height; to .main_menu ul li and .main_menu ul li a.selected, but seems like something else is limiting the background image size (17x21px)
I wanted to provide an image, but since I´m new they won´t let me do so :(
The image is a circle and it´s being sliced bottom and top, just as it was to fit into a smaller container
Here´s the code, thanks for any suggestion!
.menu_container{
position: absolute;
float: left;
width: 270px;
margin-top: 220px;
}
.main_menu ul {
padding: 0px;
margin:0px;
list-style-type: none;
}
.main_menu ul li {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
letter-spacing:4px;
text-align:right;
line-height:35px;
list-style-type:none;
}
.main_menu ul li a {
padding-right: 25px;
text-decoration:none;
color:#999;
}
.main_menu ul li a.selected {
color: #bc4c9b;
font-weight:bold;
background: url(images/circle.gif) right center no-repeat;
height: 35px!important;
}
.main_menu ul li:hover {
text-decoration:none;
color:#999;
font-weight:bold;
background:url(images/circle_grey.gif) right center no-repeat;
}

Answer 1

try and rewrite the following rule:
.main_menu ul li a {
padding-right: 25px;
text-decoration:none;
color:#999;
display:block;
}

Answer 2

Hey i think you can give to
anchor tag display: inline-block; or give to line-height
as like this
.main_menu ul li a{
display:inline-block;
line-height:35px;
}

Answer 3

Your background is attached to a anchor tag (.main_menu ul li a) and is therefor sized after font-size. To see the whole background file, you need to make anchor element to block or you can use padding.
Use:
display: inline-block;
or
display: block;
or use padding for .main_menu ul li a

Answer 4

You just need to define display:inline-block; in your li a see your updated css :-
.menu_container{
position: absolute;
float: left;
width: 270px;
margin-top: 220px;
}
.main_menu ul {
padding: 0px;
margin:0px;
list-style-type: none;
}
.main_menu ul li {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
letter-spacing:4px;
text-align:right;
line-height:35px;
list-style-type:none;
}
.main_menu ul li a {
padding-right: 25px;
text-decoration:none;
font-weight:bold;
color:#999;
display:inline-block;
}
.main_menu ul li a.selected {
color: #bc4c9b;
font-weight:bold;
background: url(http://i.imgur.com/TXNfW.gif) right center no-repeat;
}
.main_menu ul li a:hover {
text-decoration:none;
color: #595959;
font-weight:bold;
background:url(http://i.imgur.com/5Ic6o.gif) right center no-repeat;
}
see the demo:- http://jsbin.com/agavid/13/edit