Bonjour,
Après moulte recherche, je n'arrive pas à régler mon problème, j'ai trouvé plusieurs cas similaire,
mais aucun ne ma permit de corriger le mien.
Problème :
(Version courte) : Je n'arrive pas à cliquer sur les liens du menu déroulant sous IE6.
(Version longue) : J'ai trouvé un problème de positionnement (à priori) de ma balise <ul>
c'est grâce à la dev' toolbar de IE que j'en suis arrivé à cette conclusion.
Quand j'essai de sélectionner un lien dans mon menu, il arrive a choper que le <ul>
(il est au dessus des autres), donc j'ai essayé de changer les positions dans tout
les sens, sans grand succès. Et par conséquence mes balises <li> et <a> qui sont sensé
être en dessus sont in-cliquable.
voici un petit sceen :
http://img188.imageshack.us/img188/5024/menuproblem.png
voici mon CSS :
Et voici mon html :
Donc si quelqu'un à une idée, je veux bien l'entendre ^^'
Merci bien,
Modifié par Ppito (25 Jan 2010 - 12:31)
Après moulte recherche, je n'arrive pas à régler mon problème, j'ai trouvé plusieurs cas similaire,
mais aucun ne ma permit de corriger le mien.
Problème :
(Version courte) : Je n'arrive pas à cliquer sur les liens du menu déroulant sous IE6.
(Version longue) : J'ai trouvé un problème de positionnement (à priori) de ma balise <ul>
c'est grâce à la dev' toolbar de IE que j'en suis arrivé à cette conclusion.
Quand j'essai de sélectionner un lien dans mon menu, il arrive a choper que le <ul>
(il est au dessus des autres), donc j'ai essayé de changer les positions dans tout
les sens, sans grand succès. Et par conséquence mes balises <li> et <a> qui sont sensé
être en dessus sont in-cliquable.
voici un petit sceen :
http://img188.imageshack.us/img188/5024/menuproblem.png
voici mon CSS :
#navbar #nav ul {
list-style: none;
text-align: left;
margin: 0px 5px;
padding: 0;
}
#navbar #nav ul li {
display:inline;
margin: 0;
padding: 0;
font-size: 12px;
font-family: Arial;
}
#navbar #nav li a:hover {
background: url(../images/buton.png) 0 0 no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/templates/***/images/buton.png", sizingMethod="scale");
}
#navbar #nav li.parent:hover{
height: 30px;
padding-bottom: 0;
background: url(../images/submiddle.png) 0 0 no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/templates/***/images/submiddle.png", sizingMethod="scale");
}
#navbar #nav ul li.parent ul a, #navbar #nav ul li.parent ul a:hover{
height:30px;
width: 170px;
background: none;
}
#navbar #nav ul li.parent a:hover span {
height: 30px;
padding-bottom: 0;
background: none;
}
#navbar #nav ul li.active{
height: 38px;
width: 100px;
background: url(../images/buton.png) 0 0 no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/templates/***/images/buton.png", sizingMethod="scale");
}
#navbar #nav ul li ul .active, #navbar #nav ul li.active ul a, #navbar #nav ul li.active ul span{
height: 30px;
background: none;
}
#navbar #nav ul {
margin: 0;
padding: 0;
list-style-type:none;
text-align:center;
}
#navbar #nav li {
float: left;
margin: auto;
padding: 0;
width: 100px;
}
#navbar #nav li.parent {
text-align: left;
}
#navbar #nav li.parent a {
height: 30px;
text-align: center;
}
#navbar #nav li a {
height: 38px;
padding-top: 0px;
display: block;
width: 100px;
text-decoration: none;
}
#navbar #nav ul li ul {
display: none;
margin-bottom: 0px;
}
#navbar #nav ul li:hover ul{
display: block;
width: 170px;
margin: 0;
padding: 0;
background: url(../images/sub.png) 0 100% no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/templates/***/images/sub.png", sizingMethod="scale");
position: absolute;
}
#navbar #nav li:hover ul li {
float:none;
}
#navbar #nav ul li a span, #navbar #nav ul li span span{
padding: 3px 15px 25px 15px;
color: #FFF;
font: 12px/22px Arial, Helvetica, sans-serif;
font-weight: bold;
}
#navbar #nav ul li a span:hover, #navbar #nav ul li a span:active {
border: none;
color: #fff;
}
Et voici mon html :
[...]
<li class="parent item54">
<a href="/products.html"><span>Products</span></a>
<ul>
<li class="item55">
<a href="/products/enterprises.html"><span>Enterprises</span></a>
</li>
<li class="item56">
<a href="/products/providers.html"><span>Providers</span></a>
</li>
</ul>
</li>
[...]
Donc si quelqu'un à une idée, je veux bien l'entendre ^^'
Merci bien,
Modifié par Ppito (25 Jan 2010 - 12:31)