css background image is being cut off..

Question

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>
       <div style="display:none">Content for item 1</div>
    </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; 
}

Answer 1

You need to add display:block and some dimensions (and perhaps some padding to make it look nice) to your A tag to ensure the element will be big enough to contain your background image.

You're better off transferring all of the styling to your A tag. Don't bother styling the LI tags at all (unless you need floats).

.folder_open{
    vertical-align: top; <--- use padding to accomplish this instead
    text-align:left; <-- this too
    clear: both;
    margin-left:0px;
    margin-right:0px;
    padding-right:0px;
    padding-left:15px;
    position:relative;  <--- not needed.
    background-image: url(../images/maximize.png);
    background-repeat: no-repeat;
    background-position: -5px 1px;
    display:block;
    height: ??px;
    width: ??px
}

Answer 2

It looks like it might be your background position... if I understand it properly, the maximize image is disappearing, correct?

Also, one good practice, when specifying background images, I have found, is to explicitly set the background color to transparent.

.folder_closed {
  background: transparent url(../images/maximize.png) no-repeat scroll -5px 1px;
}

Answer 3

This sounds like a line-height issue---just for experimentation try setting the LI "line-height: 40px;" and see if your image shows completely...

One of the things I do in this case is I use some absolute positioning. First to set it up you have to have your UL and LIs relatively-positioned:

<style type="text/css">
  ul, li {
    position: relative;
  }
</style>
<ul>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
</ul>

Then add some padding to the left side of the LI:

<style type="text/css">
  li {
    padding-left: 30px;
  }
</style>

In this case you're using an <A> anchor w/ some class styling. Break up the <A> into two As:

<li>
  <a class="folder_icon folder_closed"></a>
  <a class="folder_title">... your title ...</a>
  ... your other content ...
</li>

And then turn one of the As into blocked display:

<style type="text/css">
  li .folder_icon {
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    width: 16px;
    height: 16px;
  }

  li .folder_closed {
    background-image: url("../images/minimize.png");
    background-repeat: no-repeat;
    background-position: -5px 1px; 
  }
</style>

How is that?