CSS bullet

Hola a todos. Mi problema es que he sustituido el punto por defecto que sale en las listas por una imagen con la propiedad list-style-image.

Mi problema es que esa imagen sale centrada en el firefox con respecto al texto lo cual perfecto

pero en el ie sale arriba. Como podría hacer que fuera centrada como en el firefox?

#contenedor_contenido_division ul {
list-style-image: url(../images/icono6_lista.gif);
width: 400px;
padding: 0px;
margin: 0px;
margin-left: 20px;
}

#contenedor_contenido_division li {
width: 400px;
font-size: 11px;
font-weight: normal;
color: #333333;
}

Un saludo y gracias.

Como ya sabes IE es un saltarin de los estandares, es por esto que no te sale centrado el bullet que hiciste. Lo que debes hacer es:

Código :

#contenedor_contenido_division ul {
background: url(../images/icono6_lista.gif) no-repeat center left;
width: 400px;
padding: 0;
margin: 0 0 0 20px; /*ORDEN: top right bottom left*/
font-size: 11px;
font-weight: normal;
color: #333333;

}

#contenedor_contenido_division li {
padding-left: .7em; /*le das un poco de padding para que haya distancia con el texto*/
}

prueba y me dices, saludos![/code]

creo que el asunto está relacionado con line-height. Prueba.

Si, lo que dice Pedro es muy probable, y ten cuidado con el estilo de los enlaces en la lista porque para IE deben tener height:100%

Código :

#contenedor_contenido_division li { height:100% }

En cualquier caso a mi me gusta el metodo que te he puesto, asi puedo manejar las distancias de los bullet y la posicion

Siempre he tenido ese problema, y debido a eso prefiero usar la viñeta como background del <li>. Se que no es lo más adecuado, pero si quiero algo "crossbrowser" a la primera y sin tantos problemas, pues uso esto.

the_OLD_JP escribió:

IDEM.

yo tambien lo Hago como NEO_JP, chocala