28173 sujets

CSS et mise en forme, CSS3

Placer un élément au dessu d'un select sous IE6, (Ok sous IE7 et FFox

Bonjour à tous,

J'ai reconstitué et épuré une page sur laquelle je travaile, je l'intègre telle quelle, ce n'est pas moi qu'il l'ai fait (javascript partout etc...)

En bas à gauche de cette page il y a une reglette avec un curseur qui se deplace en glisser deposer et quand on le deplace apparait une bulle au dessus de celui ci.

Le curseur etant invisible, vous devez deplacer le curseur non visible a l'aide des icones entourées de jaune + et - (cf ma copie d'ecran prise sous IE6) .

Au dessus de cette reglette se trouve une zone avec un label, un champ texte, un select et un bouton ok.

La bule doit passer au dessus de cette zone. Sur IE7 et Ffox c'est bon.
Sur IE6, la bulle passe en dessous du select, uniquement du select.

J'ai essayé différents positionnement, aussi bien pour la reglette (div#reglette) que la bulle(#affichagenb), que la zone avec le champ et le select (div.rechercheHome). Sans succès...

Toute cette partie est à la ligne 23 du fichier general.css, j'ai aussi joint le fichier pour IE6 (generalIE.css) et IE7 (generalIE7.css)

[/url] upload/3822-visuprobIE6.gif

La page en ligne

Si quelqu'un vois le soucis.....je sèche....

Merci.
Modifié par Hum (14 Feb 2007 - 16:01)
Bien,

j'ai lu les liens, ce qui ma fait me dire....

J'ai une une rectif a faire sur ce site (le lien plus bas...), et comment ai-je fait, alors pour que les listes deroulantes passent par dessus les select sans aucunes rustines citées dans les post en liens ?

Juste.....on apercoit les select quand ion suvole les liens du menu, mais ils sont bien au dessus, le menu n'est pas en absolue mais en relatif et j'ai aucun souvenir de ce que j'ai pu faire, car au debut ce probleme avec les select etait aussi là.


Je comprends pas....
Le site : (pour pas faire de pub j'ai rajouté le *, l'enlever pour faire fonctionner le lien....)
http://www.meetov.fr*

Merci de votre aide.
Modifié par Hum (14 Feb 2007 - 17:12)
J'ai rencontré le même problème récemment, voici une "méthode" utilisant la balise iframe pour contourner le problème :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="fr" xml:lang="fr" xmlns ="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-15" http-equiv="content-type" />
<meta name="language" content="fr" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css" media="screen">
    * {border:0:padding:0;margin:0;}
    p {width:100%;}
    #conteneur {position:relative;margin:10px;}
    #cache {position:absolute;z-index:500;background:green;width:100px;height:100px;top:0;left:30px;}	
    #select {position:absolute;top:10px;left:0;z-index:100;}
    #niv1 {position:absolute;z-index:1000;top:0;left:0;width:100%;height:100%;background:green;}
    #niv2 {position:absolute;z-index:600;top:0;left:0;width:100%;height:100%;}
</style>
</head>
<body>
<div id="conteneur">
	<div id="cache">
		<div id="niv1">
			<p>Texte au dessus du select</p>
		</div>
		<!--[if lte IE 6]>
		<iframe id="niv2"></iframe>
		<![endif]-->
	</div>
	<div id="select">
		<select class="option" name="choix">
		<option class="option" value='0'>&nbsp;</option>
		<option class="option" value='2'>Voici un premier choix dans la sélection</option>
		<option class="option" value='1'>Voici un deuxième choix dans la sélection</option>
		<option class="option" value='241'>Voici un troisième choix dans la sélection</option>
		<option class="option" value='3'>Voici un quatrième choix dans la sélection</option>
		<option class="option" value='4'>Voici un cinquième choix dans la sélection</option>
		</select>
	</div>
</div>
</body>
</html>

Modifié par Shunkin (25 Jun 2007 - 13:05)
Bis, ter, semper repetitat: il n'existe pas de contournements robustes. Ne pas se trouver dans cette situation, c'est tout (l'interface montré dans le premier message cherche franchement les ennuis).
Je suis bien d'accord que le mieux est de ne pas se retouver dans cette situation. Mais lorsqu'on est confronté au problème et que l'on doit tout de même apporter une solution parce que le site doit être comme ça et pas autrement...
Quant à la robustesse. Ce soucis n'apparait que sous IE, de la version 5 à la version 6, et la solution ne s'applique qu'à IE pour les versions inférieures ou égales à 6.
Pour en savoir plus sur les raisons de ce bug : http://support.microsoft.com/kb/177378/en-us
Modifié par Shunkin (25 Jun 2007 - 14:14)
Sujet clos
Aller à