CODEWITHSUNDEEP
cssbackground-image
eliana
eliana

Reputation: 11

background image height cut

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;
}

Upvotes: 0

Views: 1769

Answers (4)

N1ck
N1ck

Reputation: 2001

try and rewrite the following rule:

.main_menu ul li a  {
    padding-right: 25px;  
    text-decoration:none;  
    color:#999; 
    display:block;
}

Upvotes: 1

Shailender Arora
Shailender Arora

Reputation: 7788

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

Upvotes: 0

ruuter
ruuter

Reputation: 2533

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

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

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;  
}

Upvotes: 0

Related Questions