ervdesign.net

Hace bien poco, se nos planteó en el trabajo algo con lo que no me había encontrado aun, dar estilo a las etiquetas <hr />. Buscando por la red algún tipo de solución, encontré un artículo en Webmaster Libre, en el que podemos encontrar información de como dar estilo a las reglas horizontales. En ese mismo artículo, comenté que jugando con el border, se podía conseguir algo un poco más atractivo. Senda respondió, con toda la razón del mundo, que verificara en otros navegadores, y me di cuenta. Al menos que yo haya podido comprobar, en IE no podemos ocultar el borde al <hr />, por lo que cualquier modificación que hagamos en un navegador que respete los estándares, queda descartada.

Desde ese día he estado pensando en alguna solución válida. En principio quería, a toda costa, evitar tener que meter alguna etiqueta más. Realicé infinidad de pruebas, pero el borde seguía saliendo en IE, por lo que la solución que ahora os voy a plantear, incluye una etiqueta más.

La solución se basa en:

Ocultar el <hr /> a IE.
1. Dar estilo a un <span>, para simular el separador.
2. Ocultar este <span> a los demás navegadores.
3. Mostrar a los demás navegadores, el separador con su estilo.

Vamos a ver el ejemplo. Supongamos este marcado:

<div id="hrstyle">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
	elit, sed diam nonummy nibh euismod tincidunt ut laoreet
	dolore magna aliquam erat volutpat. Ut wisi enim ad minim
	veniam, quis nostrud exerci tation ullamcorper suscipit
	lobortis nisl ut aliquip ex ea commodo consequat. Duis
	autem vel eum iriure dolor in hendrerit in vulputate velit
	esse molestie consequat, vel illum dolore eu feugiat nulla
	facilisis at vero eros et accumsan et iusto odio dignissim
	qui blandit praesent luptatum zzril delenit augue duis dolore
	te feugait nulla facilisi.</p>
	<hr />
	<span class="separador2" id="hr"></span>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
	sed diam nonummy nibh euismod tincidunt ut laoreet dolore
	magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
	quis nostrud exerci tation ullamcorper suscipit lobortis
	nisl ut aliquip ex ea commodo consequat. Duis autem vel
	eum iriure dolor in hendrerit in vulputate velit esse molestie
	consequat, vel illum dolore eu feugiat nulla facilisis at
	vero eros et accumsan et iusto odio dignissim qui blandit
	praesent luptatum zzril delenit augue duis dolore te feugait
	nulla facilisi.</p>
</div>

Tenemos un contenedor con 2 párrafos dentro, separados por nuestro <hr /> y un <span>. Pongamos el CSS en marcha:

#hrstyle {
width: 300px;
position: absolute;
left: 50%;
margin-left: -150px;
}

Damos estilo al contenedor.

#hrstyle hr {
display: none;
}

Ocultamos el hr para IE (y el resto de navegadores).

#hrstyle > hr {
border: none !important;
display: block;
height: 5px;
background: url(hrimg.jpg) 0 0 repeat-x;
}

IE no implementa los selectores secundarios, por lo que con esta regla devolvemos el <hr /> a los demás navegadores.

.separador2 {
display: block;
height: 5px;
background: url(hrimg.jpg) 0 0 repeat-x;
}

le damos la misma apariencia a .separador2 que al <hr /> que llevarán los demás navegadores.

#hrstyle > .separador2 {
display: none;
}

Para que no se vean 2 separadores, ocultamos .separador2 en todos los navegadores, menos en el que lo necesita, IE.

La verdad es que me rompí la cabeza intentando buscar una solución para IE y de momento, esta es la más sencilla que encuentro. La necesidad de implementar la etiqueta <hr /> no es sólo estética, ni mucho menos. Cuando ocultamos los estilos de una web, cualquier tipo de contenedor que tengamos a modo de separador, pierde efecto, por lo que utilizar un separador real, hay veces que se hace indispensable, de hay el querer dar estilo. Os he preparado el ejemplo en marcha para que lo podáis comprobar vosotros mismos. Si usáis firefox, al ver el ejemplo, pulsad ctrl + may + s para ver la web sin estilos y veréis que el separador está ahí, tal y como queremos.

Escucha
este post

No hay etiquetas para este post. Artículos relacionados

• No hay artículos relacionados.