I have an unordered list and the background
image is being cut off when trying to place it next to the text.
I'm using jquery to add the class to the anchor tag to display the
image, and its working fine, the only problem is the
image gets cut off. I've been playing around with the css, but can't seem to figure out how to make the
image display properly...it seems like the < li is hiding the
image behind it somehow...can I place the
image in front of the < li to make it display...or am I missing something else?
Can someone help me? Thanks.
Here's the HTML:
<ul id="nav>
<li>
<a class="folder_closed">Item 1</a>
</li>
</ul>
Here's the CSS:
ul#nav{
margin-left:0;
margin-right:0;
padding-left:0px;
text-indent:15px;
}
#nav > li{
vertical-align: top;
text-align:left;
clear: both;
margin-left:0px;
margin-right:0px;
padding-right:0px;
padding-left:15px;
}
.folder_open{
position:relative;
background-image: url(../images/maximize.png);
background-repeat: no-repeat;
background-position: -5px 1px;
}
.folder_closed{
position:relative;
background-image: url(../images/minimize.png);
background-repeat: no-repeat;
background-position: -5px 1px;
}
