Cómo indicar el espacio o altura entre las líneas de texto con line-height

Si queremos indicar un determinado espacio entre las líneas de un texto podemos utilizar line-height para determinar la altura entre las líneas.

Por ejemplo si damos un espaciado de 5px entre las líneas:

line-height: 5px;

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Y si damos un espaciado mayor de 20px:

line-height: 20px;

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Posible solución cuando no funciona en IE (Internet Explorer) tr bgcolor

Imagen HTMLCuando queremos colorear una fila de una tabla (<tr></tr>) lo podemos hacer así:

<tr BGCOLOR=”#F2F2F2″>, siendo #F2F2F2 el color de relleno de la fila.

Sin embargo puede que no funcione en IE (Internet Explorer). El problema en mi caso es que tenía:

background-color:Transparent;

afectando a las filas.

La solución fue comentar el CSS implicado y se solucionó. Seguramente es un caso puntual y muchas veces no se verá en nuestro “estimado” IE por mil razones, pero esta solución me funcionó.

Solucionar menu desplegable debajo de películas flash (swf) con wmode =”opaque”

Imagen HTMLCuando tenemos un menú horizontal desplegable es probable que al colocar una pelicula flash (swf) debajo del menú, los submenus del menú desplegable queden tapados por la película flash (swf).

Cuando intentamos solucionarlo por mucho que modifiquemos el z-index no obtenemos un resultado positivo (no funciona contra toda lógica y aunque pongamos la película dentro de un div y modifiquemos el z-index). Para solucionarlo tenemos que agregar wmode =”opaque” a la etiqueda embed. Si tenemos:
<embed src=”ejemplo.swf” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”472″ height=”685″>
En el ejemplo de arriba puede que los submenus del menú horizontal queden por debajo del swf.

Para corregirlo tenemos que añadir lo siguiente:
<embed src=”ejemplo.swf” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”472″ height=”685″  wmode =”opaque”>

Simplificar en css propiedades repetidas en div

Cuando varios div tienen las mismas propiedades, en vez de repetir esas propiedades en css para cada div, podemos escribirlas juntas. Supongamos que tenemos dos div y tienen la misma propiedad, por ejemplo, color verde, entonces podriamos simplificarlo así:

<html>
<head>
<style type="text/css">
#ext1,#ext2 {color:green;}
</style>
</head>
<body>
<div id="ext1">
<p>Hola1</p>
</div>
<div id="ext2">
<p>Hola2</p>
</div>
</body>
</html>