Problema con imagen flotando a la derecha en una lista ul li

[kahlito]

Hola, un saludo a todos ya que hace mucho que no pasaba por aquí

Hace días que tengo un problema con una imagen flotante a la derecha dentro de una lista ul li que como siempre solo en Iexplorer 6 y también en el 7 me dan problemas.

El código es este:

Código HTML:

<ul class="listas">
<li>Adrián y Anita (Uruguay-Brasil-España)<img src="imagenes/adrian-y-anita.jpg" alt="Adrian y Anita" title="Adrian y Anita" class="imagen-listas" height="125" width="125"></li>
<li>Alfonso y Mónica (Cartagena)<img src="imagenes/alfonso-y-monica.jpg" alt="Alfonso y Mónica" title="Alfonso y Mónica" class="imagen-listas" height="125" width="125"></li>
</ul> 

y el css este:

Código:

.listas {
	text-decoration:none;
	margin-left:20px;
	padding-left:20px;
	list-style-image: url(imagenes/imagen-listas.gif);
	list-style-position: inside;
	}
.listas ul{margin:0;
	padding:0;
	}
.listas li{
	height:125px;
	line-height:120px;
	margin:10px;
	padding:10px;		
}
.imagen-listas{
margin-left:20px;float:right;
margin-right:150px;
}

En Firefox sale así:



y en Iexplorer 6 así:




Aparte no termino de centrar la imagen de fondo de las listas (list-style-image: url(imagenes/imagen-listas.gif); siempre queda un poco más arriba.

¿Alguna sugerencia?

Gracias.

[dacho]

Hola, de todas formas internet explorer no es el problema en este caso. el tema es que el float lo estas haciendo despues. Podes hacer varias cosas pero el tema esta estructuralmente en el html si no me falla mi conocimienta ja.

Fijate si mejor haces esto en el HTML:

Código HTML:

<ul class="listas">
<li><p>Adrián y Anita (Uruguay-Brasil-España)</p><img src="imagenes/adrian-y-anita.jpg" alt="Adrian y Anita" title="Adrian y Anita" class="imagen-listas" height="125" width="125"></li>
<li><p>Alfonso y Mónica (Cartagena)<p><img src="imagenes/alfonso-y-monica.jpg" alt="Alfonso y Mónica" title="Alfonso y Mónica" class="imagen-listas" height="125" width="125"></li>
</ul> 

y el css agregamos:

Código:

.listas {
	text-decoration:none;
	margin-left:20px;
	padding-left:20px;
	list-style-image: url(imagenes/imagen-listas.gif);
	list-style-position: inside;
	}
.listas ul{margin:0;
	padding:0;
	}
.listas li{
	height:125px;
	line-height:120px;
	margin:10px;
	padding:10px;		
}
.listas li p{
        margin: 0px;
        float:left;
        padding:0px;
}

.imagen-listas{
        margin-left:20px;
        float:right;
        margin-right:150px;
}

Creo que eso deberia solucionar el tema de la imagen a la derecha.

Sino otra solucion es colocar la imagen Antes del texto, osea dejar el html y poner la imagen asi:

Código HTML:

<ul class="listas">
<li><img src="imagenes/adrian-y-anita.jpg" alt="Adrian y Anita" title="Adrian y Anita" class="imagen-listas" height="125" width="125">Adrián y Anita (Uruguay-Brasil-España)</li>
<li><img src="imagenes/alfonso-y-monica.jpg" alt="Alfonso y Mónica" title="Alfonso y Mónica" class="imagen-listas" height="125" width="125">Alfonso y Mónica (Cartagena)</li>
</ul> 

Osea en este caso la imagen tiene que esta antes que el texto y con eso posiblemente tambien se solucione el problema.

Con respecto a centrar el background, del li te recomiendo que utilices la barra de firefox webdeveloper o Firebug y busques que esta pasando, porque se marca la diferencia entre una y otra. Antes de solucionar el problema hay que encontrarlo!....

ahhh.. mmm... Acaba de ver que utilizas list-style-image: url(imagenes/imagen-listas.gif); list-style-position: inside;... La verdad no utilizo eso para los fondos de las listas, simplemente hago un

list-style: none; y le pongo un
background-image: url(nombredeimage.jpg);
background-position: 10px 20px; (ubica la imagen de background)
Background-repeat: no-repeat;

Avisa si no te funciona lo que dije y vemos que puede estar mal de lo que dije :)

[dacho]

Una auto correccion en la primera solucion es necesario que el p tenga un width que no sobrepase el el ancho del li si lo sumamos al tamaño de la imagen.

[kahlito]

Hola dacho.

He probado todos tus ejemplos y por fin se arregla, simplemente como bien decías tenía que colocar la imagen antes del texto por el tema del float que lo hacía al revés. había probado de todo menos esa opción, estoy perdiendo facultades...

El fondo de las listas también sale ubicado correctamente

Código HTML:

<ul class="listas">
<li><img src="imagenes/adrian-y-anita.jpg.jpg" width="125" height="125" alt="Adrián y Anita" class="imagen-listas" />Adrián y Anita (Uruguay-Brasil-España)</li>
<li><img src="imagenes/alfonso-y-monica.jpg" alt="Alfonso y Mónica" title="Alfonso y Mónica" class="imagen-listas" height="125" width="125" />Alfonso y Mónica (Cartagena)</li>
</ul> 

Código HTML:

<style type="text/css">
.listas {
	text-decoration:none;
	margin-left:20px;
	padding-left:20px;
	}
.listas ul{margin:0;
	padding:0;
	}
.listas li{
	height:125px;
	line-height:120px;
	margin:10px;
	padding:10px;
	padding-left:40px;
	list-style: none;
	background-image: url(imagenes/imagen-listas.gif);
	background-position: 0 53px; 
	background-repeat: no-repeat;
	}
.imagen-listas{
        margin-left:20px;
        float:right;
        margin-right:150px;
}
	 </style> 

También en probado la otra forma con los p y el width pero me da problemas, en Iexplorer 6 si va bien, es raro...

Muchas gracias por tu ayuda