Foros del Web » Creando para Internet » CSS »

Alineacion vertical de imagen de elementos de lista Explorer vs Firefox

Estas en el tema de Alineacion vertical de imagen de elementos de lista Explorer vs Firefox en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/01/2009, 17:44
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Alineacion vertical de imagen de elementos de lista Explorer vs Firefox

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!
__________________
..:: moNTeZIon ::..
  #2 (permalink)  
Antiguo 21/01/2009, 17:52
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alineacion vertical de imagen de elementos de lista Explorer vs Firefox

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:
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 21/01/2009, 17:56
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Alineacion vertical de imagen de elementos de lista Explorer vs Firefox

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; 
}
__________________
WFC
codigo82
  #4 (permalink)  
Antiguo 22/01/2009, 10:11
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Respuesta: Alineacion vertical de imagen de elementos de lista Explorer vs Firefox

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!
__________________
..:: moNTeZIon ::..
  #5 (permalink)  
Antiguo 22/01/2009, 10:30
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Alineacion vertical de imagen de elementos de lista Explorer vs Firefox

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

Compartiendo todo lo posible con los demás.
  #6 (permalink)  
Antiguo 22/01/2009, 11:22
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Respuesta: Alineacion vertical de imagen de elementos de lista Explorer vs Firefox

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 ::..
  #7 (permalink)  
Antiguo 22/01/2009, 13:25
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Respuesta: Alineacion vertical de imagen de elementos de lista Explorer vs Firefox

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.
__________________
..:: moNTeZIon ::..
  #8 (permalink)  
Antiguo 22/01/2009, 16:54
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alineacion vertical de imagen de elementos de lista Explorer vs Firefox

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.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 23/01/2009, 03:32
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Respuesta: Alineacion vertical de imagen de elementos de lista Explorer vs Firefox

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!
__________________
..:: moNTeZIon ::..
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:03.