Tengo una CSS como estoCSS para alinear con el texto
ul {
list-style-image:url(images/bulletArrow.gif);
}
ul li {
background: url(images/hr.gif) no-repeat left bottom;
padding: 5px 0 7px 0;
}
Pero la imagen de bala no se alinea correctamente en IE (que está bien en Firefox). Ya tengo una imagen de fondo para li, así que no puedo usar la imagen de viñeta como fondo. ¿Hay alguna solución a esto?
Gracias de antemano.
Gracias a los dos. El problema es que ya uso el fondo para un separador de líneas. Pero lo cambiaré a un borde y luego usaré el fondo para la imagen de la bala.
Hay una buena explicación y solución de esta aquí: http://css.maxdesign.com.au/listutorial/master.htm
Se dice que el uso de list-style-image resultados inconsistentes en la colocación de la imagen con diferentes navegadores. Luego explica cómo usar imágenes de fondo para obtener un mejor resultado.
Wow. Cantidades masivas de código para lograr algo simple. ¡No, gracias! – AndroidDev
@AndroidDev Uhm, son 7 líneas de CSS, que en realidad podrían combinarse usando propiedades abreviadas. Disfruta evitando LOC. – coreyward
Veo que está eliminando el relleno izquierdo para los elementos de la lista. Para IE, debe hacer lo mismo con el margen izquierdo: elimínelo por completo (ajuste a cero) o hágalo algo más pequeño que el predeterminado. Luego, los elementos de tu lista se alinearán muy bien.
use altura de línea :)
¿Puede proporcionarnos un poco más de información? ¿Qué versión de IE estás usando (si te está causando tantos problemas, probablemente sea IE6)? ¿Estás tratando de alinear la imagen verticalmente con el texto? ¿Cómo se ve la imagen? ¿Solo una simple regla horizontal? –