28173 sujets

CSS et mise en forme, CSS3

[Résolu]Problème de compatibilité avec IE pour un menu

Bonjour à tous !
Je suis actuellement en train de bosser sur le site d'une asso (qui gère, entre autres, les AMAP en Isère), et je me heurte à un gros souçi sur IE (tiens, tiens...)...
En fait, étant donné que je bosse sur MAC, il m'est difficile de bosser sur la compatibilité sur IE PC... Et en me connectant sur le poste de mon maitre de stage sur le test de ma maquette, horreur !
Alors voici le lien :
http://www.alliancepec-isere.org/

Il s'agit d'un menu tiré d'ici même, un peu plus complexe puisqu'il y a des jeux de couleur selon le type de rubrique (avec ou sans sous rubrique)...
Et en gros, mon souçi majeur réside dans l'espece de "saut de ligne" qu'IE fait pour chaque élément <li> de mon menu (et également pour l'absence de fond coloré pour mes rubriques sans sous rubrique...)
Pour ce qui est du grisé du PNG de fond, ne vous inquiétez pas c'est juste que je n'ai pas eu le temps d'introduire le hack qui consiste à faire avaler à IE la transparence des PNG... Et puis pour faire encore plus simple je pourrais juste mettre un fond blanc directement dans l'image, certes... Smiley biggrin
En tous cas merci pour les tuyaux, si vous connaissez des articles qui traitent des problèmes que je rencontre !

Vincent

PS : voici le code de ma page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Alliance Paysans &Eacute;cologistes Consommateurs de l'Is&egrave;re</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 0; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

<style type="text/css">
<!--
/* CSS issu des tutoriels  http://css.alsacreations.com  */
body {
padding:0;
margin:0;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 26px;
left: 265px;
width: 160px;
font-family: Helvetica, arial, sans-serif;
font-size: 12px;
}

#menu dt {
cursor: pointer;
line-height: 16px;
text-align: right;
background-color: #afb70d;
background-image: url(img/puce_off.gif);
background-position: right;
background-repeat: no-repeat;
display:block;
width:100%;
color:#3a350f;
text-decoration: none;
padding-right: 20px;
}
#menu dt:hover {
background-color: #4c5c0f;
background-image: url(img/puce_on.gif);
background-position: right;
background-repeat: no-repeat;
color: #fff;

}
#menu dt:hover a {
color: #fff;
display:block;
width: 100%;
background-color: #c60;
background-image: url(img/puce_on.gif);
background-position: right;
background-repeat: no-repeat;
padding-right: 20px;
}

#menu dd {
position:inherit;
z-index: 100;
left: 180px;
line-height: 16px;
width: 280px;
background-color: #afb70d;
margin-top: -16px;
}

#menu ul {
}

#menu li {
text-align: left;
}

#menu dt>a {
color: #3a350f;
text-decoration: none;
}

#menu li a  {
color: #fff;
text-decoration: none;
padding-left: 10px;
line-height: 16px;
display: block;
background-color: #4c5c0f;
}

#menu li a:hover {
color: #fff;
background-color: #c60;
}

#gabarit {
width: 800;
height: 768;
}

-->
</style>

</head>
<body>
<div id="gabarit"><img src="ALL_gabarit.png" alt="" /></div>
<!-- Menu  -->

<dl id="menu">
    <dt onmouseover="javascript:montre('smenu1');">Qui sommes-nous ?</dt>
        <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
            <ul>
                <li><a href="#">Texte fondateur de l'Alliance <acronym title="Paysans &Eacute;cologistes Consommateurs" lang="fr" xml:lang="fr">PEC</acronym></a></li>
                <li><a href="#">Alliance <acronym title="Paysans &Eacute;cologistes Consommateurs" lang="fr" xml:lang="fr">PEC</acronym> Rhone-Alpes</a></li>

                <li><a href="#">Alliance <acronym title="Paysans &Eacute;cologistes Consommateurs" lang="fr" xml:lang="fr">PEC</acronym> Is&egrave;re</a></li>
                <li><a href="#">Fonctionnement en r&eacute;seau</a></li>
            </ul>
        </dd>	
            
    <dt><a href="#">Agenda</a></dt>

    <dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Nos actions</dt>
        <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
            <ul>
                <li><a href="#">Les circuits-courts</a></li>
                <li><a href="#">Manger sain &amp; &eacute;quilibr&eacute;</a></li>
                <li><a href="#">Manger bio &agrave; la cantine</a></li>

                <li><a href="#">Lutte contre les <acronym title="Organismes G&eacute;n&eacute;tiquement Modifi&eacute;s" lang="fr" xml:lang="fr">OGM</acronym> &amp; les pesticides</a></li>
                <li><a href="#">D&eacute;fense du foncier agricole</a></li>
                <li><a href="#">Relations Nord / Sud</a></li>
            </ul>
        </dd>

    <dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Les <acronym title="Association pour le Maintien de l'Agriculture Paysanne" lang="fr" xml:lang="fr">AMAP</acronym></dt>

        <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
            <ul>
                <li><a href="#">Comment &ccedil;a marche ?</a></li>
                <li><a href="#">Le respect d'une charte</a></li>

                <li><a href="#">Comment rejoindre une <acronym title="Association pour le Maintien de l'Agriculture Paysanne" lang="fr" xml:lang="fr">AMAP</acronym> ?</a></li>
                <li><a href="#">Comment cr&eacute;er une <acronym title="Association pour le Maintien de l'Agriculture Paysanne" lang="fr" xml:lang="fr">AMAP</acronym> ?</a></li>
                <li><a href="#">Les produits propos&eacute;s</a></li>

                <li><a href="#">La qualit&eacute; &amp; le prix</a></li>
                <li><a href="#">Un engagement fort des producteurs</a></li>
                <li><a href="#">T&eacute;moignages de professionnels</a></li>
            </ul>
        </dd>

        
    <dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">Espace d'&eacute;change</dt>
        <dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">
            <ul>
                <li><a href="#">Forum</a></li>
                <li><a href="#">Outils &amp; m&eacute;thodes</a></li>

            </ul>
        </dd>
    
    <dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();">Dossiers</dt>
        <dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();">
            <ul>
                <li><a href="#">L'agriculture durable</a></li>
            </ul>
        </dd>

    
    <dt><a href="#">Nous avons lu pour vous</a></dt>
    
    <dt><a href="#">Partenaires</a></dt>
    
    <dt><a href="#">Adh&eacute;sion &amp; soutien</a></dt>
           
</dl>
</body>
</html>

Modifié par Zanidou (15 Jun 2007 - 09:31)
Ouf ! J'ai trouvé pour mes histoires de "sauts de lignes" : il suffisait de rajouter :
width: 100%;
aux liens des sous-rubriques (histoire de "hasLayout", j'ai pas tout saisi, mais ça marche !)...
Et pour mes fonds colorés non pris en compte dans les rubriques simples (qui ne contiennent donc pas de sous-rubriques), je pense que c'est une histoire de non compatibilité de la synthaxe ">" dans le CSS, visiblement non pris en compte par IE...

En tout cas merci d'avance pour vos réponses !

Vincent
Modifié par Zanidou (01 Jun 2007 - 15:56)
Sujet clos
Aller à