Weird CSS LI issue

Question

I have a weird li issue I just can't figure out. I have an image set for the li on this page's content, but it's not against the text but behind the image! Confused on how to solve this. Any help would be greatly appreciated.

http://staging.liquor.com/wind-at-your-back/

Answer 1

The background images of your list are behind the cocktail image. You could either make the list floating right like this

#single_content ul {
  float:right;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  width:280px;
}

or give the lis a margin-left of your image's width+margin like so

#single_content ul li {
  background:transparent url(images/ulliarrow.png) no-repeat scroll 0 0;
  margin:0 0 0 310px;
  padding:0 0 3px 15px;
}

to make the reappear behind the floating image.

Answer 2

Immediate solution is to add the following rule to #single_content ul

margin: 0 0 0 295px;

I don't like that because it's fairly absolute, though your site looks glued together well and it shouldn't hurt. I'll look for something more elegant, and if I find it, post it here.

EDIT 1: Not much better, but you could add the following rule to the li elements instead:

background-position: 295px 0;

Answer 3

To get the background images to show up from outside of the image you can add a margin to the style

add

margin:0 0 0 ~300px;

to

#single_content ul li

Answer 4

Add

overflow: hidden;

to the #single_content ul. (overflow: auto will also work). If it needs to work in IE6 too, make sure the list has layout (e.g. by adding zoom: 1).

The lines inside a block box following a float are pushed aside by the floated element. But the block box itself doesn't move, keeping the background images at its left edge, covered by the floating element.

You can stop the block box from overlapping a float by having it establish a new block formatting context. One way to do that is to set the overflow property. That forces the entire list next to the float, instead of just pushing its text aside.

See the CSS2 specification section about floats for more details.