Pb liste déroulante sous IE6 (décalage)

Bonjour à tous et à toutes, fraichement débarqué sur votre forum je viens soumettre un premier problème ^^ :

alors voila, jai crée des boutons de listes déroulantes dont l'effet souhaité est le suivant : lors du déroulement de la liste celle-ci se superpose sur le contenu situé plus bas, sous FF ça marche nikel.

Mais sous IE6 Catastrophe !!, le reste de la page est décalé vers le bas en fonction de la taille de la liste une fois déroulée , d'ou peut venir le problème ?? Dites moi si le code CSS pourrait vous aider à résoudre le problème, je le posterais.

Merci d'avance pour votre aide.

Salut,

A priori, je pense que le contenu est décalé car ton menu déroulant n'est pas positionnée en absolute.

Mais je pense que pour confirmer, il faudrait avoir une page en ligne, au pire le code de la page, mais la page en ligne c'est mieux

Bonjour Chrisis et bienvenue sur ce forum.

Chrisis a écrit :
d'ou peut venir le problème ??

Le site a été marabouté ?

Chrisis a écrit :
Dites moi si le code CSS pourrait vous aider à résoudre le problème, je le posterais.

Ah oui, ça peut aider effectivement. Sans ça, on en est réduit à de simples spéculations (problème de positionnement absolu, maraboutage...), ce qui n'est pas très productif.

Dans l'idéal : une page de test en ligne, pour que l'on puisse voir le problème en action, et avoir accès au CSS et au HTML (parce que le CSS ne s'applique pas sur du vent...).

euh je suis désolé mais mon site étant commercial, je ne peux pas vous montrer les pages en ligne :s, sinon le CSS s'applique bien au HTML, j'ai juste le problème deja expliqué avant, voici le code CSS que j'applique aux liste déroulantes :

input {
      display: block;
      margin: 0 0 10px;
      border: 1px solid #666;
      color: #999;
      
    }

    select {
      display: block;
      width: 180px;
      
    }
    select.replaced {
      display: none;
    }
    ul.selectReplacement {
      background: url("../img/top.jpg") top left no-repeat;
      margin: 0 0 0 10px;
      padding: 0;
      height: 1.25em;
      width: 180px;
      position: relative;
      
    }
    ul.selectReplacement li {
      background: #cf5a5a;
      color: #fff;
      cursor: pointer;
      display: none;
      border:1px solid #000;
      font-size: 11px;
      line-height: 1.5em;
      list-style: none;
      margin: 0 0 0 10px;
      padding: 1px 12px;
      width: 180px;
      position: relative;
      z-index: 1;
    }
    ul.selectOpen li {
      display: block;
    }
    ul.selectReplacement li.selected {
      background: url("../img/bottom.gif") bottom left no-repeat;
      color: #fff;
      display: block;
      
      
    }
    ul.selectOpen li.selected {
      background: #9e0000;
      display: block;
      
      
    }
    ul.selectOpen li:hover,
    ul.selectOpen li.hover,
    ul.selectOpen li.selected:hover {
      background: #9e0000;
      color: #fff;
      
    }

En espérant que ceci pourra vous aider

J'aimerais préciser que j'emplois ce bout de code avec un fichier Javascript pour empécher un autre bug, en effet, les z-index sont pas gérés sous IE6, et donc ayant un autre ménu déroulant un peu plus au dessus, lorsque je déroulais celui-ci, le bouton de liste déroulante dont j'ai exposé le probleme avant se plaçait par dessus.

Je débute également en CSS et je m'aperçois que les bugs de navigateurs c'est l'enfer

edit : j'applique ce style à tous les champs select du site.
Modifié par Chrisis (12 Feb 2007 - 12:12)

Chrisis a écrit :
euh je suis désolé mais mon site étant commercial, je ne peux pas vous montrer les pages en ligne

Ah... Si la confidentialité est à ce point nécessaire, il suffit de fournir une page test HTML CSS avec un contenu fictif. En l'état, ce sujet est une devinette

a écrit :
voici le code CSS que j'applique aux liste déroulantes

Mélange d'éléments de formulaires <select> et de listes <ul> ?
Curieux...
Le HTML est plus que jamais nécessaire

a écrit :
en effet, les z-index sont pas gérés sous IE6

La propriété z-index est parfaitement gérée par IE6.
Il peut s'agir d'un problème d'élément fenêtré, ou d'un problème de haslayout...
Once again, le code HTML nous le dira

a écrit :
Mélange d'éléments de formulaires <select> et de listes <ul> ?
Curieux...
Le HTML est plus que jamais nécessaire cligne

c'est le fichier .JS qui veut ca, c'est un petit script que j'ai téléchargé avec le code css tout fait a intégrer.

Quand au fichier HTML rien d'exceptionnel, le bout de code css que je vous ai deja montré est dans mon fichier main.css qui s'applique à toutes les pages du site, sinon voici le bout de code HTML concerné par le CSS :

<!-- filtre -->	
	
				
				
			<form action="{copixurl url_rewrite=catalogue 
					univers_id=$HANDLER->univers_id 
					univers_name=$HANDLER->univers_name 
					sous_univers_id=$HANDLER1->sous_univers_id 
					sous_univers_name=$HANDLER1->sous_univers_name 
					rubrique_id=$Rubrique->rubrique_id 
					rubrique_name=$Rubrique->rubrique_name}" name="form_filtre_soffre" method="post">
			
			
			
				<center>
				Filtrer par :
				{$sur_offre_id}
				</center>
				<br /><br/ >
			<table>
			<tr>
				<td align="center">
				<select id="filtre_soffre" name="filtre_soffre" onchange="javascript: alert('toto');">
					<option>Sur Offre</option>
					{foreach from=$Rubrique->rubrique_list_sur_offres item=SurOffre}
						<option value="{$SurOffre->sur_offre_id}">{$SurOffre->sur_offre_name}</option>
					{/foreach}
				</select>
				</td>
				
				<td align="center">
				<select id="filtre_marque" name="filtre_marque" onchange="javascript: alert('toto');" >
					<option>Marque</option>
					{foreach from=$ListMarques item=Marque }
						<option value="{$Marque->marque_id}" >{$Marque->marque_valeur|lower|capitalize}</option>					
					{/foreach}
				</select>
				</td>
				
				<td align="center">
				<select id="filtre_couleur" name="filtre_couleur" onchange="javascript: alert('toto');" >
					<option>Couleur</option>
					<option value="noir">noir</option>
				</select>
				</td>
			</tr>
			
			</table>
			
			</form>

comme vous pouvez le voir y'a rien d'extraordinaire.

Le bout de code de index.tpl pour vous montrer que mes classes CSS s'applique bien aux fichiers concernés où se trouve des balise Select :

<script type="text/javascript" src="{copixurl}js/select.js" ></script>
<link rel="stylesheet" type="text/css" href="{copixurl}styles/main.css"  />

je ne vous met pas le code du fichier javascript car il ne doit pas avoir d'influence sur le bug, je vais mettre très bientot des screenshots pour que vous voyez a quoi ca ressemble sous IE6 et FF.

Alors les listes déroulantes (Sur offre, Marque et Couleur) à leur état initial :
Ici

Le résultat (souhaité) sous Firefox avec le déroulement qui se superpose sur le contenu situé plus bas :
Ici

et enfin le désastre sous IE6 :
Ici

Comme vous pouvez le voir la taille de la fenetre ou se trouve mes listes déroulantes s'est agrandie proportionellement à la taille de la liste déroulante et les autres listes se déplacent toutes seules juste en passant la souris dessus

Qu'en pensez vous ?
Modifié par Chrisis (12 Feb 2007 - 14:44)

@Chrisis : Merci de relire la règle 12 du forum, qui concerne la mise en forme des liens dans le forum.

oui oui désolé je me suis trompé je suis entrain de corrigé mes liens ^^
sinon pour en revenir à mon problème, le code et les screenshots vous parle + ?
Modifié par Chrisis (12 Feb 2007 - 15:04)