28220 sujets

CSS et mise en forme, CSS3

[Résolu] Infobulle et select : mauvaise superposition dans IE6

Bonjour à tous !
J'ai consulté les divers messages parlant d'infobulle, mais je n'ai pas trouvé la réponse à mon problème.

J'ai utilisé le tutorial d'Alsacréations pour réaliser des infobulles. Cela fonctionne sans problème dans FF, mais dans IE6, l'infobulle s'affiche systématiquement derrière les listes à option. Smiley fache

Cela fait un bon moment que je suis dessus et je n'arrive pas à savoir comment le corriger. Smiley decu

Voici le code CSS que j'utilise: 
  th {
    background-color: #000066;
    color:white
  }
  a.header {
    position: relative;
    color: white;
    text-decoration: none;
  }
  a.header:hover {
    text-decoration: none;
    color: white;
    z-index: 1;
    background: none; /* correction d'un bug IE */
  }
  a.header .help {
    display: none;
  }
  a.header:hover .help {
    z-index: 500;
    display: inline;
    position: absolute;
    top: 2em;
    left: -40px;
    width: 200px;
    background: #d6ebff;
    color: black;
    padding: 2px;
    border: solid black 1px;
  }


et voici le code html :

<table border="1">

  <tr>
    <th><a class="header" href="#">Titre 1<span class="help">Test test test test test test test test test test test test test test test test test test test.</span></a></th> 
    <th><a class="header" href="#">Titre 2<span class="help">Test test test test test test test test test test test test test test test test test.</span></a></th> 
    <th><a class="header" href="#">Titre 3<span class="help">Test test test test test test test test test test test test test test test test test.</span></a></th> 
    <th><a class="header" href="#">Titre 4<span class="help">Test test test test test test test test test test test test test test test test test.</span></a></th> 
  </tr>
  
  <tr> 
    <td>tsfdgijdlkjdfk </td>
    <td>
      <select size="1" name="progress1">
        <option value="0">0%
        <option value="50">50%
        <option value="100">100%
      </select>
    </td>
    <td><input type="text" size="3"/></td>
    <td><input type="text" size="3"/></td>
  </tr>

  <tr> 
    <td>tsfdgijdlkjdfk </td>
    <td>
      <select size="1" name="progress1">
        <option value="0">0%
        <option value="50">50%
        <option value="100">100%
      </select>
    </td>
    <td><input type="text" size="3"/></td>
    <td><input type="text" size="3"/></td>
  </tr>

</table>


Merci d'avance si vous pouvez m'aider !
Modifié par Melodie (10 Aug 2006 - 16:19)
Précision supplémentaire : après quelques recherches sur Internet, je viens d'apprendre que dans IE6, un select s'affiche devant tous les autres éléments, quel que soit le z-index qu'on leur attribue ! C'est un bug qui a été corrigé dans IE7. Mais pour l'instant, la majorité des gens ont encore IE6...

J'ai donc essayé de rajouter dans la balise <a> un petit bout de code pour masquer le select lorsqu'on survole le lien :
<a class="header" href="#" onmouseover="document.f.progress1.visibility='hidden';">
(f est le nom de mon formulaire). Mais ça ne marche pas : le select ne se masque ni sur IE, ni sur FF !

Pour vérifier, si l'événement "onmouseover" était bien détecté par les 2 navigateurs, j'ai essayé d'agir sur d'autres propriétés du select (comme par exemple 'disabled') et là ça marche... Smiley sweatdrop
Merci Laurent pour votre réponse.

J'ai trouvé pourquoi je n'arrivais pas à masquer les select avec un peu de javascript !
J'avais ecrit 
document.form.select.visibility
au lieu de 
document.form.select.STYLE.visibility

Cela marche maintenant sans problème ! OUF Smiley biggrin

Le problème est résolu avec :
onmouseover="document.form.select.style.visibility='hidden';"
onmouseout="document.f.select.style.visibility='visible';"
Sujet clos
Aller à