Crossbrowsing
Ancora il nostro template non viene visualizzato correttamente su tutti i browser, specialmente su Internet Explorer.
Primo problema. Nelle versioni di IE inferiori alla 6 la regola applicata al div container:
margin: 0 auto;
non funziona!
Possiamo risolvere aggiungendo la regola:
text-align: center;
al body, e di conseguenza per mantenere tutto allineato a sinistra, impostiamo:
text-align: left;
nel div container.
Ecco il codice integrato con le due ultime regole:
body {
font-size: 62.5%;
font-family: 'Lucida Grande', Thaoma, Verdana, Arial, sans-serif;
color: #555;
text-align: center;
background: #fff url(../images/bg.jpg) repeat-x;
}
#container {
background: transparent url(../images/bgpage.gif) repeat-y 100% 0;
margin: 0 auto;
width: 770px;
text-align: left;
}
Secondo problema: la barra di navigazione, questo su tutte le versioni "moderne" di Internet Explorer, non risulta allineata a destra! Possiamo risolvere aggiungendo le regole:
#nav ul{ float: right; display: inline; }
Terzo problema: il pulsante "invia" del form sulla testata viene visualizzato a sinistra. Risolviamo definendo questa classe:
.inviaform{
position: absolute;
top: 0;
right: 0;
display: block;
border: 0;
width: 42px;
height: 19px;
cursor: pointer;
}
Abbiamo concluso, ecco il nostro template finito.
Considerazioni finali
Le scelte adottate per convertire il design realizzato su Photoshop in XHTML sono personali e vi sono sicuramente vie diverse che possono portare ad altrettanti risultati apprezzabili; una fra tutte è l'utilizzo della tecnica di image-replacement utilizzata per il logo. Tale tecnica non risulta efficace su Internet Explorer 5, il quale non visualizza l'immagine, però si è preferito adottare tale tecnica in luogo di altre meno accessibili, considerando che gli utenti di tale browser sono oramai molto pochi.
Scarica il template e il file PSD in formato ZIP.
Guide CSS
Responsive Desing, la guidaProgettare siti da fruire su dispositivi diversi è imprescindibile... |
Guida CSS3Scoprire e usare al meglio tutte le novità dell'ultima versione dei... |
Guida CSS Tecniche essenzialiTesto, immagini, layout, form, liste, tabelle: soluzioni pronte per... |
Newsletter @CSS
Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |