Todo comenzó al querer convertir mis elementos hr utilizando estilos, de tal forma que se viera una línea de puntos. Sin problema me puse manos a la obra e inmediatamente incluí en mi hoja de estilos:
hr{margin:0; padding:0; border-bottom:dotted 1px #000}Probando en los diferentes navegadores, todo parecía ir bien, hasta que abrí la página en el annoying IE6, todavía utilizado por algunos internautas que no han descubierto Firefox o Google Chrome. El problema es que en IE6 el estilo de borde dotted es tomado como dashed, apareciendo entonces una molesta línea formada de guiones en vez de puntos.
Decidí buscar algunos workarounds en la web, encontrando que podía colocar una imagen de fondo al elemento hr. Me dispuse a crear en Photoshop una imagen de 2 de ancho y 1 de alto y con el Pencil creé un cuadro al lado izquierdo de la imagen, guardé mi maravilloso punto como dot.jpg y sustuí mi estilo anterior por:
hr{border:none; height:15px; background: url(images/dot.jpg) repeat-x center center}Nuevamente comenzó la etapa de pruebas en los diferentes navegadores (gracias a una herramienta llamada Multiple IE puedo probar para todas las versiones de IE). En Firefox no hubo problemas pero cuando probé en IE7 y en IE6 un borde gris rodeaba la imagen. Ingenuamente pensé que, colocando border:solid 1px #FFF o color:#FFF se solucionaría el problema, pero para mi gran frustración esto no fue así.
Remando en la web conseguí una manera de deshacerme del borde, la solución: colocar un div alrededor de hr: <div class='hr'><hr/></div> y aplicar los siguientes estilos:
div.hr{ background: #FFF url(images/dot.jpg) repeat-x center center; height: 15px}div.hr hr{display: none}Esto funciona maravillosamente, y realmente si tienen la posibilidad de colocar los div's no hay ningún problema... Pero yo si tenía un problema, mis hr eran generados por un WYSIWYG y el resultado guardado directamente en la base de datos. Pude haber modificado esto server side, pero una gran cantidad de datos ya estaban en la base de datos de producción y cambiarlos era una opción poco práctica.
La solución fue implementar en javascript una función que tomara todos los hr y los colocara dentro de elementos div con clase hr. El resultado:
<script type="text/javascript">
var fix_hr = function(){
if(!document.getElementsByTagName) return;
var hrs = document.getElementsByTagName('hr');
for(var i = 0; i < hrs.length; i++) {
var hr = hrs[i];
var wrap_div = document.createElement('div');
wrap_div.className = 'hr';
hr.parentNode.replaceChild(wrap_div, hr);
wrap_div.appendChild(hr);
}
}
window.onload = fix_hr;
</script>
La solución funciona actualmente para todos los navegadores mencionados en este post. De esta manera, se ve sin problemas la tan buscada línea punteada.
Entradas
