Líneas
horizontalesLíneas
horizontalesEn esta página se comentan las propiedades que se pueden aplicar a una línea horizontal <hr /> de una página web:
Por desgracia, cada navegador trata las líneas de una manera distinta. Firefox considera las líneas como bloques, mientras que Internet Explorer considera las considera como elementos en-línea. Por eso, las propiedades que permiten establecer las características de una línea son distintas en cada navegador. Normalmente la solución es incluirlas todas, pero eso tampoco funciona siempre.
El color de una línea se establece de distinta manera en Firefox y en Internet Explorer:
Para asegurar que la línea se vea del mismo color en ambos navegadores, se pueden establecer las dos propiedades (color y background-color) con el mismo valor.
  |
hr {
background-color: red;
}
|
|
  |
hr {
color: red;
}
|
|
| |
hr {
color: red;
background-color: red;
}
|
En Internet Explorer, si la línea tiene más de 2px de altura, la propiedad background-color también establece el color de la línea:
| |
hr {
background-color: red;
}
|
|
| |
hr {
background-color: red;
height: 10px;
}
|
En Internet Explorer, si la línea tiene más de 2px de altura, la propiedad color tiene prioridad sobre background-color:
| |
hr {
background-color: red;
height: 10px;
}
|
|
| |
hr {
background-color: red;
color: blue;
height: 10px;
}
|
La propiedad height establece la altura de la línea.
| |
hr {
height: 10px;
}
|
La propiedad width establece la anchura de la línea. Conviene expresarla como porcentaje.
| |
hr {
width: 50%;
}
|
Por omisión, las líneas se alinean al centro.
| |
hr {
width: 50%;
}
|
Pero para establecer una posición determinada, Firefox e Internet Explorer funcionan de forma distinta:
En algunos casos, se puede conseguir que ambos navegadores muestren la misma línea en la misma posición estableciendo las dos propiedades simultáneamente.
El ejemplo siguiente muestra cómo se alinea una línea a la izquierda:
| |
hr {
margin-left: 0px;
width: 50%;
}
|
|
| |
hr {
text-align: left;
width: 50%;
}
|
|
| |
hr {
margin-left: 0px;
text-align: left;
width: 50%;
}
|
El ejemplo siguiente muestra cómo se alinea una línea a la derecha:
| |
hr {
margin-right: 0px;
width: 50%;
}
|
|
| |
hr {
text-align: right;
width: 50%;
}
|
|
| |
hr {
margin-right: 0px;
text-align: right;
width: 50%;
}
|
Pero en otros casos no se puede conseguir, ya que ambos navegadores no aplican las propiedades que definen la línea en el mismo orden.
| |
hr {
margin-left: 50%;
width: 25%;
}
|
|
| |
hr {
margin-left: 33%;
width: 33%;
}
|
|
| |
hr {
margin-left: 33%;
margin-right: 33%;
}
|
|
| |
hr {
margin-left: 20px;
margin-right: 20px;
}
|
Parece que Firefox establece primero el ancho de la línea y después coloca la línea en la posición que definen los márgenes (interpretando los porcentajes con respecto al espacio total disponible, en este caso la celda de la tabla), así que si se dan sólo los dos márgenes considera que la línea tiene de ancho el 100% del espacio.
Sin embargo, parece que Internet Explorer 6 primero reserva los márgenes (con respecto al ancho de pantalla, no al ancho de la celda de la tabla) y en el resto del espacio dibuja la línea (interpetando los porcentajes con respecto al espacio restante, es decir, descontando los márgenes).
No sé si se puede definir un estilo que entiendan los dos navegadores.
Las líneas sin color se ven porque el navegador dibuja un borde que da profundidad a la línea:
| |
hr {
height: 10px;
}
|
Cuando se da color a las líneas, Internet Explorer ya no dibuja ese borde, mientras que Firefox lo sigue dibujando:
| |
hr {
background-color: red;
color: red;
height: 10px;
}
|
Si se quiere quitar ese borde en Firefox, hay que quitarlo explícitamente con la propiedad border, pero Internet Explorer no hace caso de esa propiedad:
| |
hr {
background-color: red;
|
Así que tener cuidado, porque si se le quita el borde a una línea que no tiene color, en Firefox la línea dejaría de verse:
| |
hr {
border: none;
height: 10px;
}
|