Iconos en elementos de una lista desaparecen detras de una imagen

[drea]

Hola a todos, he tratado de resolver este problema sola pero mis conocimientos de css son bastante limitados asi que opte por buscar ayuda.
En una lista en vez de bullets uso iconos para esto uso la propiedad background , funciona sin problemas hasta que agrego una imagen con propiedad float:left , entonces primero se ve la imagen y al lado los elementos de la lista pero sin iconos porque los iconos se encuentran detras de la imagen. La idea es que aparesca la imagen(o foto) y al lado la lista(con los iconos por delante). Pienso que si utilizaria list-style-image:(url) en vez de background: url() no tendria ese problema pero solo me esta permitido usar background porque el icono exige una posicion exacta. Muchas gracias por vuestra ayuda.

Código:

ul-code

.text_image_new ul.textlist {
    margin-bottom: -4px !important;
    margin-top: 4px !important;
    padding-bottom: 0;
}
.text_image_new ul.textlist {
    list-style: none outside none;
    padding-left: 0;
}
.text_image_new ul, .text_image_new ol {
    font-size: 1em !important;
}
.section ul {
    font-size: 1.1em;
    /*list-style-image: url("/.../x.gif");*/
    margin: -2px 0 10px;
    padding: 0 0 1px 16px;
}

Código:

li-code

.text_image_new ul.textlist li {
    font-size: 1em !important;
}
.text_image_new ul.textlist li {
    background: url("/../x.gif") no-repeat scroll 0 2px transparent;
    padding-left: 10px;
}
.section ol li, .section ul li {
    font-weight: normal;
    margin-bottom: 4px;
}

[pzin]

No veo donde tienes la imagen con ese float en tu código.

De todas formas, un fondo siempre va a estar detrás de una imagen. Lo que podrías hacer es usar ::before o ::after, con content añadir la imagen a la lista y supongo que ajustándolo con z-index debería de funcionar.

Luego la opción más fácil es mover esa imagen flotada hacia algún lateral para que el fondo pueda volver a verse.

[drea]

Gracias por responder tan pronto . Creo que no me he explicado bien. Espero que con una imagen sea mas claro mi problema.
(Parece un bullet-point pero es un icon)

Código:

 /* image-code */
.text_image_new .onethird_size {
    width: 186px;
}
.text_image_new .image_left {
    float: left;
    padding: 5px 6px 3px 0;
}

[pzin]

¿La imagen forma parte de la lista o es un elemento que sólo está cerca? Parece que es lo segundo. De todas formas si puedes aportar el HTML mejor, porque según cómo esté hay diferentes soluciones.

[drea]

La imagen es un elemento que solo esta cerca. Primero viene la imagen y luego una lista que se puede extender hasta debajo de la imagen , es decir que fluye alrededor de la imagen.

Código:

<div class="left-content">
<a id="text_bild__standard" name="text_bild__standard"></a>
<div class="section text_image_new">
<h1>
<div id="ID" class="preview"> TEST </div>
</h1>
<span class="image_left onethird_size">
<a target="_self" href="http://www.forosdelweb.com/f53/iconos-elementos-lista-desaparecen-detras-imagen-1030908/">
<img id="ID" class=" preview " width="186" height="196" alt="" title="" src="http://www.forosdelweb.com/f53/iconos-elementos-lista-desaparecen-detras-imagen-1030908/x.png">
</a>
</span>
<div id="ID" class="preview">
<ul class="textlist">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>k</li>
<li>l</li>
<li>m</li>
<li>n</li>
<li>o</li>
<li>p</li>
</ul>
<br>
<div class="clear_both_margin"></div>
<br>
<div class="clear_both_margin"></div>
<div style="clear:both"></div>
</div>
<div class="clear_both"> </div>
</div>
</div>

[pzin]

Entonces, para que la lista siga bordeando a la imagen y luego se coloque justo debajo, tienes que ajustar con margin-right alguna de las clases image_left o onethird_size.