I fogli di stile Fase di progettazione vengono associati solo durante la creazione di un documento. Quando la pagina viene visualizzata nella finestra di un browser, sono visibili solo gli stili effettivamente associati o incorporati nel documento.

Lavorando sempre con i css richiamati da una variabile trovo molto comoda questa funzione allorché voglio avere subito un’idea dell’effetto generato dal foglio di stile associato alla pagina.

Per utilizzare un foglio di stile Fase di progettazione, procedere nel modo seguente.

Aprire la finestra di dialogo fogli di stile Fase di progettazione: 

•   io faccio click destro nella pagina e poi Stili CSS > Fase di progettazione; oppure
• fare clic con il pulsante destro del mouse sul pannello Stili CSS e selezionare Fase di progettazione nel menu di scelta rapida.
• selezionare Testo > Stili CSS > Fase di progettazione.

Nella finestra di dialogo, impostare le opzioni per mostrare o nascondere un foglio di stile selezionato:
Per visualizzare un foglio di stile CSS in fase di progettazione, fare clic sul pulsante più (+) sopra a Mostra solo in fase di progettazione, quindi nella finestra di dialogo Seleziona un foglio di stile selezionare il foglio di stile CSS da mostrare.

Per nascondere un foglio di stile CSS, fare clic sul pulsante più (+) sopra a Nascondi in fase di progettazione, quindi nella finestra di dialogo Seleziona un foglio di stile selezionare il foglio di stile CSS da nascondere.

Per eliminare un foglio di stile dai due elenchi, fare clic sul foglio di stile da eliminare e fare clic sul pulsante meno (-) corrispondente.

Fare clic su OK per chiudere la finestra di dialogo.

Il pannello Stili CSS viene aggiornato con il nome del foglio di stile selezionato insieme all’indicatore “nascosto” o “progettazione”, in base alla condizione selezionata per il foglio di stile.

Nella dura realtà, quasi quotidianamente, mi trovo a dover risolvere, a volte in maniera ormai automatica, a volte meno,  svariati bug per far sì che il layout corrisponda a quello progettato dal bravo grafico.

Fornirò, cominciando da oggi, man mano che mi si da l’occasione di rifletterci su durante il mio lavoro, un piccolo vademecum per la risoluzioni dei maggiori problemi inerenti la resa su diversi browser.
Da tenere comunque ben presente che più della metà dei vostri problemi sarà risolta strutturando il vostro bel codice, CSS e (X)HTML, in maniera corretta; quindi scialate pure con gli appositi validatori: CSS e (X)HTML.

Doubled-Margin Float

Questo bug si verifica quando, in IE 6 e precedenti,  un elemento reso float:left ha un margin-left oppure float:right ha un margin-right. Avviene allora che il margine corrispondente al float viene raddoppiato. La soluzione più rapida, se proprio non possiamo fare a meno di specificare il margine critico, è di dichiarare l’elemento display:inline. Questo semplice accorgimento non ha di fatto alcun effetto sulla resa, dato che un elemento float viene reso di default come block-level.