Personalizzare il tag HR

Warning: Undefined array key "juiz_sps_order" in /membri/saitfainder/wp-content/plugins/juiz-social-post-sharer/inc/front/buttons.php on line 302

Il tag HR di HTML è una linea orizzontale che viene spesso usata per dividere un testo in più parti. Dare uno stile a questo tag comporta spesso qualche problema di compatibilità con i vari browser. Vediamo come fare.

Nei browser standard l’HR è un normalissimo box con il suo stile, ma nei browser non standard (Internet Explorer 6 tanto per capirci) è un elemento particolare privo di altezza e contenuto.

Tagliamo la testa al toro e vediamo subito come creare un HR a puntini rossi:

hr {
height: 1px;
width: 80%;
border: 1px dotted #666;
border-width: 1px 0 0 0;
}

L’attributo height non ha in realtà uno scopo specifico, ma ci permette di evitare di avere visualizzazioni diverse a causa di un eventuale CSS di default diverso sui vari browser. La larghezza width è semplicemente una trovata estetica.

Per dare lo stile voluto in definitiva andiamo a impostare lo stile del bordo del box. Poiché ha altezza 1px il browser visualizzerebbe due bordi, per cui andiamo a visualizzare solo quello superiore. Come stile ho scelto un punteggiato rosso, ma IE6 decide che è meglio visualizzare dei trattini, pazienza.files/files/