YUI Autocomplete rend sous d'autres éléments de page dans IE7

Question

Je travaille maintenant sur une page contenant une colonne de boîtes avec des ombres et des coins sexy, mais pas avec l'exemple ici . Je dois admettre que je ne comprends pas tout à fait le fonctionnement de CSS, mais cela est magnifique .

Dans la zone supérieure se trouve une entrée de type texte utilisée pour la recherche. Cette zone de recherche est associée à un widget YUI autocomplete .

Tout fonctionne bien dans Firefox3 sur Mac, FF2 sous Windows, Safari sur Mac. Dans IE7 sous WinXP, les suggestions de saisie semi-automatique s'affichent sous les boîtes arrondies, ce qui rend tout sauf le premier illisible. / p>

Où pourrais-je commencer à chercher pour corriger le problème?

Voici à quoi ressemble le succès de FF2 sous WinXP:

Et voici à quoi ressemble l'échec dans IE7:

Answer 1

La solution de travail que j'ai finalement mise en œuvre reposait sur la lecture de cette explication encore et encore .

Dans le code HTML sous-jacent, tous les éléments à coins arrondis bleus sont des DIV et sont tous des frères et sœurs (tous les enfants du même DIV).

Le z-index de la division autocomplete elle-même (qui est l'arrière-arrière-petit-enfant du conteneur à coins arrondis div) peut être arbitrairement élevé et ne résoudra pas ce problème, car IE rendait la totalité du contenu. du champ de recherche sous le contenu complet de la ". Statistiques vitales " case, car tous deux avaient un index z par défaut et que Vital Stats était plus tard dans le code HTML.

Le truc était de donner à chacun de ces DIV frères (les conteneurs à coins arrondis bleus) des index z descendants, et de les marquer tous en position: relative. Ainsi, le div bleu qui contient le champ de recherche est z-index: 60, le & "Statistiques vitales &"; la case est z-index: 50, " balises " est z-index: 40, et ainsi de suite.

Ainsi, plus généralement, trouvez l’ancêtre commun de l’élément qui se superpose et de l’élément qui se superpose. Sur les enfants immédiats de l'ancêtre commun, appliquez les index z dans l'ordre dans lequel vous souhaitez que le contenu s'affiche.

Answer 2

Jeremy,

Désolé pour ce retard, mais espérons que la réponse vous sera utile dans un projet futur.

Le problème ici est que IE crée un nouvel ordre d'empilement chaque fois qu'il existe un élément avec position: relative, ce qui signifie que l'index z lui-même n'est pas le seul facteur déterminant. Vous pouvez en savoir plus à ce sujet ici:

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

Pour résoudre le problème, si je comprends bien votre problème, appliquez position: par rapport au conteneur qui encapsule toute votre implémentation autocomplète (puis position: absolu par rapport à votre conteneur de résultats). Cela devrait créer un ordre d'empilement indépendant dans IE pour ces éléments, ce qui leur permet de flotter au-dessus de l'autre position: les piles relatives qui apparaissent plus tard dans la page.

Cordialement, Eric

Answer 3

Je ne comprends pas totalement la configuration à l'origine du problème, mais vous pouvez explorer la propriété useIFrame de l'objet YUI Autocomplete - elle superpose un objet iframe sous le champ autocomplete, ce qui permet au champ de flotter ensuite au-dessus des objets qui l’obscurcissent dans la présentation buggy d’IE.

http://developer.yahoo.com/yui /docs/YAHOO.widget.AutoComplete.html#property_useIFrame

Mais les docs disent que cela compte dans 5.5 < IE & Lt; 7, ce n'est donc peut-être pas le problème que vous rencontrez. Encore une fois, si vous ne comprenez pas tout à fait la configuration avec laquelle vous travaillez, vous pouvez également essayer d’essayer diverses z-index valeurs du champ autocomplete et des éléments de niveau bloc environnants.

Answer 4

Assurez-vous que le z-index de la div à complétion automatique est un nombre plus grand que les div qui constituent la boîte aux coins arrondis. Microsoft met l'index z des éléments supérieurs à 20000 ou 100000, je crois. Peut-être serait-il sage de faire de même.

Answer 5

J'ai eu un problème similaire à celui-ci, je l'ai résolu en changeant fondamentalement l'indice z pour les différents div. Il suffit de définir un nombre plus élevé pour chaque div dans l’ordre dans lequel il doit être affiché.