Alineacion vertical de imagen de elementos de lista Explorer vs Firefox

[moNTeZIon]

Buenas!
Necesito ayuda con algo.
Trato de utilizar una imagen en los elementos de lista LI para que quede más bonito.
He intentado con una imagen de 2 x 2 píxels, gris. Un punto gris.
En este caso ocurre que Explorer muestra el punto más arriba de lo que sería una alineación vertical con el texto "normal".
En cambio Firefox lo muestra más abajo de lo "normal" también.
Como ninguno acaba de ser exacto, entontes trato de jugar con la imagen, pero si le añado espacio transparente por arriba, en Firefox ya se ve desfasado, muy abajo.
Si lo hago a la inversa, el que se ve fatal es Explorer, demasiado arriba.
He realizado varias pruebas pero no consigo saber con qué "tocar" ese aspecto.
Dejo el código CSS por si ayuda.

Código:

#MenuLateral ul {
	list-style-image: url(/Images/PuntoGris.gif);
}

#MenuLateral li a:link {
	display: block;
	font-family: Century Gothic, Arial;
	font-size: 13px;
	font-weight: bold;
	color: #666666;
	line-height: 14px;
	padding: 5px 0px 5px 0px;
	text-decoration: none;
}
#MenuLateral li a:visited {
	display: block;
	font-family: Century Gothic, Arial;
	font-size: 13px;
	font-weight: bold;
	color: #666666;
	line-height: 14px;
	padding: 5px 0px 5px 0px;
	text-decoration: none;
}
#MenuLateral li a:hover {
	color: #000000;
}

Gracias por vuestra ayuda.
Un saludo!

[Mikmoro]

Como esto que comentas suele ser bastante complicado gracias a IE, quizá te interese mirar este truquillo que simula algo parecido y queda muy bien:

[willyfc]

pero, si de todas maneras vas a usar un punto gris de 2 x 2, por que no de esta manera:

Código:

#MenuLateral ul {
list-style:disc; 
}

[moNTeZIon]

Vaya por dios!
A la que se pone uno a intentar hacer las cosas bien, se encuentra con estas sorpresas...
Pues la verdad, me quedo con tu solución, Mikmoro. De hecho es bastante elegante. No se trata de ninguna chapuza para Explorer o algo parecido, sino algo que es funcional para los dos.
Por cierto, muy didáctica la página! jeje.
Willyfc! No desestimo tu opción, pero lo que comenta Mikmoro me vale para este caso y para toooodos los demás. Por lo tanto, que queda como "mi estándar" por el momento, hasta que le salga un sustituto mejor
Un saludo y gracias a los dos!

[Dalvenjha]

Has probado usando tu imagen como background del <li>? ahi podrías indicarle en el background left center y listo!!

[moNTeZIon]

Exacto Dalvenjha!
De hecho, en eso se basa la solucion que me ha dado Mikmoro.
Lo único que, en esa página que ofrece como ejemplo, lo tiene hecho con un H2 en vez de con un LI.
Pero para el caso (entender la cosa) es lo mismo.
Gracias de todas formas tio!
Un saludo.

[moNTeZIon]

Hola de nuevo.
He hecho algunas pruebas, y añadiré algo más a la solución.
Si se utiliza la alineacion del background "left center", cuando el elemento de lista ocupa dos línes el punto se centra verticalmente y no se mantiene alineado con la primera linea.
Así que he optado por alineación "left top" y he añadido espacio transparente al GIF, por arriba, de forma que fuera bajando su posición hasta quedar alineado con la primera linea del elemento de lista. Ahora si!
La pena es que para otro tamaño de fuente hay que currarse un GIF de distinto tamaño.
Pero el resultado final lo vale!
Un saludo.

[Mikmoro]

Me alegro de que te haya servido. A ver si me acuerdo lo del asunto que comentas de las dos líneas para añadirlo a la página. No necesitabas añadir tamaño transparente: supongo que te bastaría con poner la cantidad de desplazamiento en lugar del top, pero bueno, lo has solucionado, que es lo que importa.

Saludos.

[moNTeZIon]

Oh! que grande!
Entonces no hace falta ir generando GIFs, dependiendo del tamaño de las fuentes.
La alineación del background la he dejado así "left 5px". De forma que la imagen baja 5px.
De esta forma puedo colocarla donde quiero, manteniendo la imagen original. Ahora si que si!
Gracias!