28172 sujets

CSS et mise en forme, CSS3

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 :

#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)
As-tu un URL qui pourrait nous aider à mieux visualiser le problème ?

Car présentement je ne vois pas ce qui pourrait déplaire à IE6.
Non, le site est en dev' en local et sur un réseau interne.
En gros le menu ce déplie mais les liens ne sont pas cliquable
(genre juste du texte).