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:
http://cod.altervista.org/temp/quirk0.jpg
Il problema
Ed eccoci alla nota dolente: IE 6 e successivi mettono i link molto spaziati uno rispetto all'altro. Ecco come appaiono:
http://cod.altervista.org/temp/quirk1.jpg
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
:wink:
