Interlineado diabólico! Cambia según el browser que uses!

[ekincheng]

Hola chic@s!:
Bueno bueno... primero de todo felicidades por este gran foro que me ha servido de mucha ayuda.
Ahora al lio.. estoy maquetando una página web en CSS.. y estaba haciendo pruebas. Me he dado cuenta que el interlineado entre párrafos o listados cambia si lo miro con el IE 6.0 o 7.0, mientras que sólo con el FF se visualiza correctamente.

No sólo eso, también en el IE 6.0 los png no hacen transparencia.

En el IE 7.0, me desaparece el borde blanco que sirve de separación en el menú lateral, para la opción activa (que se pone en negrita).

También en el menú superior no tengo bemoles de hacer que cuando el mouse pasa por encima los textos se pongan en negrita, se me movia todo el menú.

Este es el codigo CSS del contenido:

Código:

#content p{
	padding:0 0 20px;
}
#content h1{
	font:bold 25px/30px verdana;
	padding:0 0 5px;
	text-align:left;
}
#content blockquote{
	padding:0 0 0 45px;
}

#content li{
list-style: none;
background-image: url(images/flecha.gif);
background-position: left top;
background-repeat: no-repeat;
padding-left: 30px;
}

#content .listado{
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 18px;
margin-top:10px;
text-align:left;

}

#content .numeracion{
list-style: decimal inside;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 17px;
text-align:left;
}

Este es el HTML

Código:

<div id="content">
			<div class="ct-wrap">
			<h1>Consultoría de marketing online</h1><br />
				<p>El marketing online no dista mucho del marketing en el mundo real, el concepto no cambia, cambia la técnica para ofrecernos posibilidades que los medios clásicos siempre habían perseguido:</p>
				<blockquote><p><ul class="listado">
				<li>Las campañas publicitarias no tienen por qué ser masivas pueden crearse tantas como clientes objetivo tengamos y dirigirnos exclusivamente a ellos.</li> <br />
				<li>Podemos medir la respuesta de esos Clientes e interactuar uno a uno con ellos.</li><br />
				<li>Cualquier acción puede ser medida de principio a fin de forma casi instantánea por lo que con un proceso de mejora continua la rentabilidad de una campaña, de una nueva sección de una web o de una acción comercial offline es máxima.</li></ul></p></blockquote><br /><br />

No veo que tenga mucha complicación. Pero no hay manera!.
h t t p://www.thatzad.com/soluciones/consultoria%20marketing%20online/consultoria%20marketing%20online.html


Saludos y gracias de antemano!
Isaac

[feral]

IE6 no soporta PNG de transparencias variables, solo soporta transparecia total del pixel tipo GIF o PNG-8.
Hay trucos para que IE6 pueda visualizar PNG con diferentes grados de transparencia mediante php, javascript y algun que otro metodo mas pero tienen sus partes negativas tambien.

Generalmente para eliminar inconsistencias entre navegadores como primer paso se suele resetear la hoja de estilo de los navegadores que es la que en buena parte genera esas inconsistencias, aplicando 0 a margenes , bordes, rellenos etc con un selector universal.

* { margin: 0; padding: 0; border: 0;}

Como segundo paso es usar un xhtml estandar y valido, a poder ser xhtml estricto. Los navegadores son mas consistentes y estables en este modo de renderizado.

Aun asi IE6 cuenta con decenas de bugs (probablemente varios centenares), algunos mas graves que otros que merecen respuestas concisas y muchas veces extrañas. Como por ejemplo cuando se flota un elemento y se aplica un margen normal al lado al que se flota, este magicamente se duplica x 2 en IE6, se soluciona con display: inline; (aunque no tenga sentido).

Line height es una propiedad que suele traer incosistencias per se, para minimizarlas se recomiendo usar EM como medida para letras, interlineado y separacion entre parrafos. (Aunque se puede usar em para practicamente todo).

Como regla general si en firefox se ve bien, es que esta bien (cuidado que tampoco es perfecto), si esta bien en firefox en IE7 hay una alta probabilidad de que tambien se vea bien (aunque algo menor). IE6 es la mayor espina del panorama actual, mas teniendo en cuanta que es el numero 1 en cuanto a uso.
La unica solucion para tratar con el IE6 y en parte tambien con el IE7 (aunque este ha corregido muchos errores de su version anterior) consiste en leerse compendios de bugs del IE y aplicar metodos de solucion (que en muchos casos son extraños y no tienen sentido pero dan resultado).

[ekincheng]

Muchisima gracias feral por tus respuestas. Me voy a poner a ello.
Para la transparencia es algo que no entiendo, en la maquetación inicial que hice para enseñar al cliente he descubierto que se ve perfecto en IE6, se puede ver aqui
h t t p://www.sam-gc.com/thatzad/e-marketing.html

Y lo único que he ido cambiando ha sido interlineados, añadir nuevas clases o ids, para dejar fijo el menú seleccionado. Añadir una imágen a un listado en el contenido, etc..
Realmente puede afectar eso a la transparencia?

En cuanto al interlineado probaré lo que me dices, de todas maneras estuve jugando con la medida EM en vez de PX y lo veia igual, primero haré lo de resetear la hoja de estilo.

Lo cojonudo es que comprobé en la web que el CSS cumple con las normativas estandard, pasó el test..

En fin, a ver si alguien añade un poco más de luz al asunto.

Muchas gracias de nuevo!

[ekincheng]

Solucionado todo todo todo!!! joder, que contento!!

h t t p:// www.thatzad.com

Gracias!!