Come effettuare il reset degli stili CSS
L'utilizzo dei CSS nelle pagine web ormai è una cosa normale. Ormai anche il webmaster ai primi stadi utilizza i CSS per separare l'architettura del sito dall'aspetto grafico.
I CSS aiutano molto, tanto che se un sito è fatto bene per fargli cambiare grafica basta intervenire solo su di esso senza toccare una riga di HTML.
Purtroppo però non è tutto oro ciò che luccica...
In un mondo perfetto le specifiche dei CSS sarebbero interpretate allo perfettamente allo stesso modo da tutti i browser in circolazione. In un mondo perfetto però... In questo ognuno fa più o meno quello che gli pare.
Come ovviare in parte a questo problema? Utilizzando i CSS Reset!
Come evitare che firefox tronchi le pagine nell’anteprima di stampa
Firefox è un ottimo browser, ma per quanto riguarda la stampa lascia un po' a desiderare.
Non è difficile imbattersi in anteprime di stampa abnormi, in cui viene visualizzata solo una pagina di contenuto e il resto scompare misteriosamente...
Per ovviare a questo problema creiamo una pagina di stile alternativo per la stampa, che chiameremo print.css, ed inseriamo le seguenti righe:
#idcontenitore {
display: inline;
overflow:visible;
}
Poi linkeremo lo style nel nostro template con la seguente riga:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Ora l'anteprima di stampa di firefox dovrebbe tagliare le pagine in modo corretto!
Settare l’altezza di un div a 10px o meno in ie6
Certe volte si ha necessità di settare un'altezza minima a un div, ma ie6 non ne vuole sapere e setta una sua "Altezza minima".
Questo perché ie6 HA un'altezza minima per gli elementi: l'altezza del carattere.
Per ovviare al problema inserire nel CSS:
#div{
height:5px;
line-height:0; /* Altezza riga a 0 */
font-size:0 /* Dimensione Carattere a 0*/
}
Come rimuovere il bordo tratteggiato alle immagini sul click
Quando si clicca su un pulsante, div con background o altra cosa grafica compare un fastidiosissimo bordo tratteggiato.
Per toglierlo basta inserire negli stili
a:active{outline: none;}
a:focus{-moz-outline-style: none;}
E il gioco è fatto!