[RESOLU] DIV en-dessous des Input, Select, etc.

Bonjour !

J'ai un DIV qui vient s'insérer sur la page lorsque l'on se trouve sur un textfield (élément INPUT) et il disparaît au moment où l'on quitte le textfield.

Sous FF, pas de soucis !

Sous IE, petit soucis : mon DIV passe en-dessous des autres textfields, select, etc. Pour que ce soit plus parlant : je vous ai joint un screenshot.



Donc, si vous avez une idée de solution, elle est la bienvenue !

Merci d'avance !
Modifié par Alphonse (09 Oct 2007 - 12:24)

Salut,

Peux-tu nous montrer ton code ?
pour t'aider ça serait plus facile.



Merci

Pas de problème, je pense que mon code CSS devrait suffire. S'il faut le code JS et/ou XHTML alors dites-le mais je ne le juge pas utile.

Code CSS :

.field-hint {
	position: absolute;
	width: 180px;
	z-index: 50;
	background-image: url("../../images/hint_topborder.gif");
	background-repeat: no-repeat;
	background-position: left top;	
	padding: 14px 0 0 0;
	margin:  5px 0 0 50px;
	color: #000;
}

.field-hint div {
	background-color: #fffbb8;
	border-left: 1px solid #ffc20d;
	border-right: 1px solid #ffc20d;
	border-bottom: 1px solid #ffc20d;
	padding: 4px;
}

Merci d'avance !

Tu peux envoyer une url ? Pour qu'on voit la différence entre ie et firefox ?
merci

Je développe en local, je n'ai donc pas d'url a proposer mais je fais vite un screenshot de ce que ça donne sous FF et j'envois la photo !

A dans 30 secondes

Voici une image de ce que ça donne sous FF (le texte a changé depuis tantôt ).

il faut de toutes façons mettre un z-index au div et qu'il soit supérieur à 50.

Par contre, je n'ai aucun espoir que les select s'affichent au dessous du div dans ie6, voir mon topic resté sans réponse ici :
http://forum.alsacreations.com/topic-4-29605-1-Ie6-et-elements-fenetres--select-toujours-au-dessus-de-object.html

Aïe... La deuxième image a remplacé la première du message

>il faut de toutes façons mettre un z-index au div et qu'il soit supérieur à 50.

Pourquoi est-ce qu'il doit être supérieur à 50 ? Je n'utilise pas d'autres z-index dans mon CSS sur cette page...

>Par contre, je n'ai aucun espoir que les select s'affichent au dessous du div dans ie6

Arf ! Ca craint ça...

Tu as essayé de mettre un display:block ?

Alphonse a écrit :
Aïe... La deuxième image a remplacé la première du message

Si tu avais des noms d'images qui ressemblent à ça:
ScreenShot-blabla-image1.png
ScreenShot-blabla-image2.png
... c'est normal.

Le forum coupe à un certain nombre de caractères. Ta première image a été abrégée ainsi:
14342-ScreenShot.png (id membre + 10 caractères)
et la seconde a été abrégée ainsi:
14342-ScreenShot.png (id membre + 10 caractères)

Ça surprend la première fois.

Alphonse a écrit :
Je développe en local, je n'ai donc pas d'url a proposer

Mettre une page de test succincte en ligne, ça se fait vite et ça fait gagner du temps à tout le monde. Du coup, ça incite à se pencher sur les problèmes (on a déjà les éléments sous la main) et ça diminue les chances de voir un sujet ignoré.

Voici donc les deux images

Sous IE :


Sous FF :


J'essaye de mettre une page demo en ligne dans la matinée.

Merci en tout cas !

>Tu as essayé de mettre un display:block ?

Ca ne change rien... J'ai remplacé "visibility: hidden;" par "display: none;" dans la classe "field-hint-inactive" et j'ai rajouté "display: block;" dans la classe "field-hint".

Hello,

Théoriquement, faire passer les select en dessous d'un autre élément dans IE (du moins dans IE 5-6) est impossible. C'est un problème qui a trait aux choix techniques faits pour implémenter ces éléments dans ce navigateur.

La solution évoquée sur la page suivante semble intéressante, mais c'est de la bidouille à fond les ballons.

Cela demande de rajouter une iframe vide que l'on dimensionnera et positionnera par dessus les contrôles de formulaire à cacher. Les explications sont assez fouillées, donc il est préférable de pouvoir lire l'anglais.

On peut aussi penser utiliser un commentaire conditionnel pour insérer cet iframe vide.

Sinon, il faudra positionner l'infobulle ailleurs, ou imaginer une autre solution ergonomique pour transmettre ces informations...

Arf ! En effet, c'est une solution que je vais mettre de côté. Merci toutefois pour le lien.

Je vous met quand même un lien vers une page de démonstration au cas où ! Si quelqu'un possède IE7 peut me dire ce qu'il se passe (infobulle en-dessous ou au-dessous du select), ça m'intéresse

Page de Démo

Dans IE7, l'infobulle est au dessus. Donc seul IE6 pose problème.

Je te remercie de ta réponse ! Dommage qu'il n'y ait que mon big boss qui utilise IE6... Il s'agit d'une application interne et on utilise tous FF sauf lui !

Bonne journée !

Bon j'ai partiellement résolu le problème en le contournant et en affichant toujours mon infobulle sauf si le navigateur utilisé est IE6.

Merci pour vos éléments de réponse en tout cas.