This is probably a stupid question and is simply a case of me needing a fresh set of eyes to see an obvious mistake, but I’m stuck.
I’m using an unordered list to display my skill set for a new portfolio site I’m building. I want to use background images to display a star rating of my skill level with each program/language. This is the HTML in question (the list is longer, obviously, but I’ve chopped it down to one LI to show the concept):
And this is the CSS:
.skills li{
display:block;
width:178px;
height:21px;
}
.skills a{
color:#6d7374;}
.skills a:hover{
text-decoration:none;
}
.five{
background-image:images/stars/five.png;
display:block;
width:178px;
height:11px;
padding:5px 0px 5px 0px;
}
.even{
background:#f3f3f3;
border-top:1px solid #f0e9e7;
border-bottom:1px solid #f0e9e7;
width:178px;
height:21px;
}
The .even class is applied to the list item and is assigned to ever other item in the list to achieve an alternating background color. Inside each list item is a link that is assigned a class based on how many stars it would have, and the class for the number of stars (.five, in this case) has the appropriate background image.
It seems no matter what I do, the background image doesn’t show up. And yes, the path to the image is correct.
