Bonjour,
J'ai réalisé des menus incluant l'usage de Javascript mais il me semble que IE6 gère cela étrangement. Une fois le menu ouvert, la sélection LI est démesurément longue. Je pense qu'il faut ajouter un critère dans le style.css, mais je ne vois pas lequel. Firefox 2 parvient à lire le tout sans problème.
A votre avis, d'où vient le problème ?
La page : http://www.unige.ch/formcont/test
Résumé des problèmes :
L'affichage sous Internet Explorer 6 dysfonctionne dans les cas suivants :
1. La couleur du menu de gauche ne va pas jusqu'en bas de l'écran (height: 100% ne semble pas pris en compte).
2. Lorsque les sous menus sont ouverts (ex : documentation), on voit en transparence le texte de la boîte "contenu" derrière. Normalement c'est opaque (sous Firefox, c'est obtenu avec le critère z-index attribué à chaque classe).
3. Position:fixed n'est pas géré par IE6. Il faut que je me penche d'avantage sur les solutions déjà proposées ici et ailleurs. Pour l'instant j'ai ajouté au css :
html>body .menu {
position: fixed;
}
Page validée sous http://www.validome.org
Un grand merci à celles et ceux qui se pencheront sur la question.
Voici le code html
Voici le code css :
Modifié par vinx (28 Mar 2007 - 17:13)
J'ai réalisé des menus incluant l'usage de Javascript mais il me semble que IE6 gère cela étrangement. Une fois le menu ouvert, la sélection LI est démesurément longue. Je pense qu'il faut ajouter un critère dans le style.css, mais je ne vois pas lequel. Firefox 2 parvient à lire le tout sans problème.
A votre avis, d'où vient le problème ?
La page : http://www.unige.ch/formcont/test
Résumé des problèmes :
L'affichage sous Internet Explorer 6 dysfonctionne dans les cas suivants :
1. La couleur du menu de gauche ne va pas jusqu'en bas de l'écran (height: 100% ne semble pas pris en compte).
2. Lorsque les sous menus sont ouverts (ex : documentation), on voit en transparence le texte de la boîte "contenu" derrière. Normalement c'est opaque (sous Firefox, c'est obtenu avec le critère z-index attribué à chaque classe).
3. Position:fixed n'est pas géré par IE6. Il faut que je me penche d'avantage sur les solutions déjà proposées ici et ailleurs. Pour l'instant j'ai ajouté au css :
html>body .menu {
position: fixed;
}
Page validée sous http://www.validome.org
Un grand merci à celles et ceux qui se pencheront sur la question.
Voici le code html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Page d'aide à l'utilisateur</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript">
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
</script>
<script type="text/javascript">
//--------------- LOCALIZEABLE GLOBALS---------------
var d=new Date();
monthname= new Array("janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = d.getDate() + " " + monthname[d.getMonth()] + " " + d.getFullYear();
//--------------- END LOCALIZEABLE ---------------
</script>
</head>
<body>
<div id="logo"> </div>
<div id="bandeau" class="entete"><br>Application </div>
<div id="menu" class="menu">
<script type="text/javascript">
preChargement();
</script>
<dl>
<dt><span style="text-align: center"><a href="../index.html" title="Retour à la page d'accueil">Accueil</a></span></dt>
</dl>
<dl><dt > </dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu9');"><a href="../presentation.html">Présentation</a></dt>
<dd id="smenu9" onmouseover="javascript:montre('smenu9');" onmouseout="javascript:montre();">
<ul>
<li><a href="../historique.html">Historique</a></li>
<li><a href="../divers.html">Divers</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');"><a href="../formation.html">Formation</a></dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
<ul>
<li><a href="../mars.html">Séance du 13 mars</a></li>
<li><a href="../ateliers.html">Ateliers de formation</a></li>
<li><a href="../indiv.html">Formations individuelles</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');"><a href="../documentation.html">Documentation</a></dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
<ul>
<li><a href="../lexique.html">Lexique</a></li>
<li><a href="#">Interface</a></li>
<li><a href="#">Enregistrement</a></li>
<li><a href="../vpn.html">VPN</a></li>
<li><a href="#">OFPC</a></li>
<li><a href="#">Facturation</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');"><a href="../faq.html">FAQ</a></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
<ul>
<li><a href="../interface.html">Interface</a></li>
<li><a href="../inscriptions.html">Inscriptions</a></li>
<li><a href="../finances.html">Finances</a></li>
<li><a href="../courrier.html">Courrier</a></li>
<li><a href="../listes.html">Listes</a></li>
<li><a href="../autre.html">Autre</a></li>
</ul>
</dd>
</dl>
<dl> <dt > </dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Informations</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
<ul>
<li><a href="../nouveautes.html">Nouveautés</a></li>
<li><a href="../stat.html">Statistiques</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu5');">Téléchargements</dt>
<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">
<ul>
<li><a href="../formulaires.html">Formulaires</a></li>
<li><a href="../administration.html">Administration</a></li>
</ul>
</dd>
</dl>
<dl> <dt > </dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="../liens.html" title="liens utiles">Liens</a></dt>
</dl>
<dl>
<dt><a href="../qui.html" title="personnes ressources">A qui s'adresser ?</a></dt>
</dl>
<dl> <dt > </dt>
</dl>
<dl>
<dt><span style="text-align: center"><a href="../contact.html" title="Pour contacter les responsables du site">Contact</a></span></dt>
</dl>
<p><a href="http://www.validome.org/referer"><img style="border:none"
src="http://www.validome.org/images/set4/valid_html_4_0_1.gif"
alt="Valid HTML 4.01" width="80" height="15"></a></p>
</div>
<div id="dateformat" class="dateformat">
<script type="text/javascript">document.write(TODAY);</script>
</div>
<div id="contenu">
<h1>Accueil</h1>
<p> <a href="lien">Application 2.0</a></p>
<p>Bienvenu dans l'espace de support de l'application 2.0</p>
<p>Nunc ergo conscientia exterritus apprehendit Caecilium Celerem, mox Fabium Iustum; rogat ut me sibi reconcilient. Nec contentus pervenit ad Spurinnam; huic suppliciter, ut est cum timet abiectissimus: 'Rogo mane videas Plinium domi, sed plane mane - neque enim ferre diutius sollicitudinem possum -, et quoquo modo efficias, ne mihi irascatur.' 9 Evigilaveram; nuntius a Spurinna: 'Venio ad te.' 'Immo ego ad te.' Coimus in porticum Liviae, cum alter ad alterum tenderemus. Exponit Reguli mandata, addit preces suas, ut decebat optimum virum pro dissimillimo, parce. Cui ego: 'Dispicies ipse quid renuntiandum Regulo putes. 10 Te decipi a me non oportet. Exspecto Mauricum' - nondum ab exsilio venerat -: 'ideo nihil alterutram in partem respondere tibi possum, facturus quidquid ille decreverit; illum enim esse huius consilii ducem, me comitem decet.' 11 Paucos post dies ipse me Regulus convenit in praetoris officio; illuc persecutus secretum petit; ait timere se ne animo meo penitus haereret, quod in centumvirali iudicio aliquando dixisset, cum responderet mihi et Satrio Rufo: 'Satrius Rufus, cui non est cum Cicerone aemulatio et qui contentus est eloquentia saeculi nostri'. 12 Respondi nunc me intellegere maligne dictum quia ipse confiteretur, ceterum potuisse honorificum existimari. 'Est enim' inquam 'mihi cum Cicerone aemulatio, nec sum contentus eloquentia saeculi nostri; 13 nam stultissimum credo ad imitandum non optima quaeque proponere. Sed tu qui huius iudicii meministi, cur illius oblitus es, in quo me interrogasti, quid de Metti Modesti pietate sentirem ? ' Expalluit notabiliter, quamvis palleat semper, et haesitabundus: 'Interrogavi non ut tibi nocerem, sed ut Modesto.' Vide hominis crudelitatem, qui se non dissimulet exsuli nocere voluisse. 14 Subiunxit egregiam causam: 'Scripsit' inquit 'in epistula quadam, quae apud Domitianum recitata est: "Regulus, omnium bipedum nequissimus"'; quod quidem Modestus verissime scripserat. 15 Hic fere nobis sermonis terminus; neque enim volui progredi longius, ut mihi omnia libera servarem dum Mauricus venit. Nec me praeterit esse Regulum 'dyskathaireton'; est enim locuples factiosus, curatur a multis, timetur a pluribus, quod plerumque fortius amore est. 16 Potest tamen fieri ut haec concussa labantur; nam gratia malorum tam infida est quam ipsi. Verum, ut idem saepius dicam, exspecto Mauricum. Vir est gravis prudens, multis experimentis eruditus et qui futura possit ex praeteritis providere. Mihi et temptandi aliquid et quiescendi illo auctore ratio constabit. 17 Haec tibi scripsi, quia aequum erat te pro amore mutuo non solum omnia mea facta dictaque, verum etiam consilia cognoscere. Vale.</p>
<p>Vous trouverez ici toute aide utile, en particulier dans les sections <a href="documentation.html">Documentation</a> et <a href="faq.html">FAQ</a> (Foire Aux Questions). </p>
</div>
</body>
</html>
Voici le code css :
#bandeau{
border-style:none;
height:69px;
background-color: #CC0066;
z-index: 3;
}
#logo {
position:absolute;
background-image: url(images/formcontlogo.gif);
background-repeat: no-repeat;
height: 69px;
width: 177px;
padding: 0;
z-index: 4;
}
#menu {
position:fixed;
top: 0px;
width: 160px;
height: 100%;
padding-top: 100px;
background-color: #CC0066;
z-index: 2;
}
html>body .menu {
position: fixed;
}
dl, ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu dt {
cursor: pointer;
margin: 2px;
padding-left: 5px;
height: 20px;
line-height: 20px;
font-weight: bold;
border: hidden;
}
#menu dt a {
color: #ffffff;
display: block;
border: 0 none;
height: 100%;
}
#menu dt a:hover {
background: #ffffff;
color: #CC0066;
}
#menu dd {
background: #CC0066;
border: 1px solid black;
list-style-type: none;
position: absolute;
left: 6em;
margin-top: -1.5em;
width: 10em;
}
#menu li {
margin: 0;
padding-left: 25px;
list-style-type: none;
}
#menu li a {
color: #ffffff;
font: 12px, Verdana,Arial,sans-serif;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover {
background: #ffffff;
color: #CC0066;
}
#dateformat {
position:absolute;
left:0px;
top:70px;
}
#contenu{
position:absolute;
top: 100px;
left: 248px;
width: 600px;
font:15px Arial, Helvetica, sans-serif;
text-align:justify;
z-index: 1;
}
/* CLASSES */
body{
font-family: Verdana,Arial,sans-serif;
background-color:#FFFFFF;
border:none;
margin:0;
}
a:link, a:hover, a:visited {
color: #CC0066;
text-decoration: none;
}
.dateformat {
font: 12px Arial, Helvetica, sans-serif;
color: #CC0066;
letter-spacing:0.2em;
padding-left: 200px;
padding-top:5px;
}
.image {
float: left;
}
.entete {
font-family: Verdana, Arial, sans-serif;
font-size: 120%;
font-weight:bold;
color: #ffffff;
padding-left: 250px;
}
.menu {
display:block;
font: 14px, Verdana,Arial,sans-serif;
line-height: 1.55;
color: #ffffff;
}
titre, h1, h2, h3, h4, h5, h6 {
font-family: Verdana,Arial,sans-serif;
margin: 0px;
padding: 0px;
}
.titre {
font-family: Verdana, Arial, sans-serif;
font-size: 120%;
color: #ffffff;
}
.h1 {
font-family: Verdana, Arial, sans-serif;
font-size: 120%;
color: #ffffff;
}
.h2 {
font-size: 100%;
color: #CC0066;
}
.contenu1{
font-weight:bold;
}
.contenu2{
padding-left: 30px;
}
Modifié par vinx (28 Mar 2007 - 17:13)
