XHTML vs. IE6 problema e soluzione

04-12-2003, 16.00.57

Scrivo questo topic per rendere noto un problema (e relativa soluzione) che mi sono ritrovato a dover affrontare in questi giorni sviluppando un sito.

Il problema riguarda (tanto per cambiare) la decantata compatibilita' di IE 6 con XHTML.

Chi conosce gia' il Quirk Mode puo' anche evitare di andare avnati a leggere: e' quello.
Ho deciso di scrivere su questo forum perche' magari non tutti lo conoscono (io ad esempio vivevo nel magico mondo dell'ignoranza fino a ieri)

Non sono richieste conoscenze particolari per comprendere questo testo. Se non capite qualcosa (o non avete voglia di leggere) saltate e andate avanti, dovreste "afferrare" il concetto lo stesso.

L'antefatto
C'era una volta (e per fortuna c'e' ancora) un sito.
Detto sito e' stato scritto in XHTML 1.0 Strict.

La barra di navigazione e' stata fatta usando un div.

Nella barra di navigazione i link sono stati messi come punti di un elenco (per facilitare la lettura del sito ai non vedenti) ma il problema comunque c'era anche prima dell'introduzione di <ul> :

XHTML
[code:1:605d482608]
<div id="NavBar">
<ul class="NavBar" >
<li class="NavBar" >
<a href="Intro.php?lang=fr" class="NavBar" title="">Introduction</a>
</li>
<li class="NavBar" >
<a href="#" class="NavBar" title="">Index alphabétique</a>
</li>
<li class="NavBar" >
<a href="./Search.php?lang=fr" class="NavBar" title="">recherche</a>
</li>
<li class="NavBar" >
<a href="#" class="NavBar" title="">Problèmes</a>
</li>
<li class="NavBar" >
<a href="#" class="NavBar" title="">Informations</a>
</li>
<li class="NavBar" >
<a href="./Login.php" class="NavBar" title="">Privé</a>
</li>
</ul>
</div>
[/code:1:605d482608]

CSS
[code:1:605d482608]
div#NavBar {
position: absolute;
left: 0px;
top: 120px;
width:20%;
height: 385px;
background: transparent url("./Images/Barra.jpg") repeat-x;
text-align: center;
}

ul.NavBar {
padding: 0px;
text-indent: 0px;
margin: 0px;
}

li.NavBar {
list-style: none inside;
display: inline;
}

a.NavBar {
display: block;
width: 90%;
height: 30px;
border: 1px solid #000000;
background: transparent;
color: #000000;
font-size: 120%;
text-decoration: none;
vertical-align: middle;
margin: 5%;
}

a.NavBar:hover {
display: block;
width: 90%;
height: 30px;
border: 1px solid #ffffff;
background: #4244A2;
color: #ffffff;
font-size: 120%;
text-decoration: none;
vertical-align: middle;
margin: 5%;
}
[/code:1:605d482608]

Non preoccupatevi dell'elenco: non si vede. Serve solo ai browser vocali.

Per semplicita' ecco l'immagine di come viene:

Il problema
Ed eccoci alla nota dolente: IE 6 e successivi mettono i link molto spaziati uno rispetto all'altro. Ecco come appaiono:

Ma se il mouse vi passa sopra tornano a posto.

La Risoluzione
La causa del problema e'... nel mio codice.

Nel senso che io all'inizio scrivo (giustamente) la DTD (DocType Definition) che asserisce che la mia pagina e' scritta in XHTML:

[code:1:605d482608]
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[/code:1:605d482608]
E questo manda in palla IE.

La soluzione sta nel passare ad un "Quirk Mode", ovvero non mettere la DTD e lasciare che IE si arrangi.

Io ho risolto con uno scriptino in php che identifica il browser ed evita di mettere la DTD se e' IE 6 o superiori.

Spero che cio' vi possa essere utile.

Bibliografia
Il sito del quirkmode (c'e' molto di piu' di questo) e':
http://www.quirksmode.org

04-12-2003, 18.34.30

http://pro.html.it/articoli/id_312/i...pag_6/pag.html

Comunque non è buona cosa evitare il doctype a meno che tu non conosca a menadito tutti gli elementi che andrai a introdurre nel sito.
Molto meglio sarebbe evitare xhtml 1.1 o al limite creare la pagina in html.

Il rischio è che ti ritrovi ad avere dei comportamenti diversia seconda del browser Microsoft che usa l'utente, oppure a dover realizzare tanti siti quanti sono i browser in circolazione.
Daccordo cambiare al volo un foglio di stile su due è una cosa fattibile ed anche io la faccio, ma gestire 4 o 5 browser inizia ad essere pesante specie se ci sono molti elementi nella pagina, intendo elementi modificati con i fogli di stile.

Una dritta non mia ma che anche io uso e ho notato pure tu a volte, è quella di creare un foglio di stile vuoto, in cui vengono definite solo le chiamate alle classi e agli identificatori che usi negli altri fogli, ma vuoti senza nessuno elemento di modifica al loro interno.
Caricandoli dinamicamente quando lo user-agent è sconosciuto (o conosciuto ;)) farà vedere il sito senza grafica, e se il contenuto è la cosa più importante questo non andrà perso.

Ovvio su di un sito dove la grafica è preponderante, questa è una pratica da evitare

04-12-2003, 21.02.42

mposta i margin ;)

04-12-2003, 22.20.30

Originalmente inviato da numerone

mposta i margin ;)

???

05-12-2003, 00.43.39

Gia' fatto: non funziona. Il problema e' proprio nel DTD.

So che la soluzione sarebbe usare HTML ma in questo caso non posso -sigh-

Comunque, non so voi, ma io sono abbastanza stanco di dovermi sempre preoccupare di come Microsoft abbia "interpretato" uno standard.

Perche' diavolo IE deve sempre dare tutti questi problemi?

Uff... scusate ma e' tutto il giorno che ci lavoro (non su questo problema in particolare, pero'...) e sono un po' stanco :?

Meno male che la prossima settimana.... sara' peggio

Discussione: XHTML vs. IE6 problema e soluzione

LinkBack

Strumenti discussione

Display

Regole di scrittura