chalda.it
3dic/092

Come effettuare il reset degli stili CSS

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!

19ott/090

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!

19ott/090

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*/
}
24giu/092

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!