Alignement champ et fenêtre auto-completer

[sim100]

Bonjour à tous,

Voila, j'ai un champs, et qund je commence à rentrer 3 caractères, une liste déroulante me fait une liste de propositions. Voir image.

Sur FF, la liste déroulante s'aligne parfaitement avec le champ dans lequel je fais ma saisie.

Sur IE, c'est comme sur l'image, la liste se met loint en dessous et à droite.

Comment faire pour que ce soit aligné aussi sous IE?

Merci beaucoup

[Blount]

Ce genre de problème dépend de la conception (HTML, CSS, JS).
Dur de résoudre un problème sans voir le code.

À vue d'œil, je dirais qu'il y a un problème de position relatif à un élément différent sur les deux navigateurs.

[sim100]

La liste déroulante c'est des ul et li

Code: Tout sélectionner

.uldroplist {
cursor:pointer;
text-align: left;
list-style-type: none;
width: 100%;
margin:0; padding:3px;
border-left: 1px solid #DCD069; border-right: 1px solid #DCD069; border-bottom: 1px solid #DCD069;
background: #FFFDEA;
color: #16052d
}
.lidroplist:hover { z-index: 2; background: #fffef5 }

Pour le reste rien de spéciale, site avec structure en div

[Blount]

Montre ta structure HTML.
Comment tu intègres cette liste ? Position absolue, relative ?
Via JS ? Directement par CSS ?

[sim100]

Pour la structure, c'est

Code: Tout sélectionner

#header { position: relative; background-color: #b5c07a; width: 100% }
.header_table { width: 960px; padding: 4px }

#under_header { position: relative; background-color: #D6E0A2; width: 100%; border-bottom: #c7c7c7 1px solid; color: #5b603c; font-size: 11px; z-index: 10 }
.under_header_table { width: 960px; padding: 2px }

#conteneur { background-image: url(design/bg.png); background-repeat:repeat-x; background-color: #dcd4bb; width: 100% }
#home_center_table { width: 940px; background-color: #fff; border-left: #b3b3b3 1px solid; border-right: #b3b3b3 1px solid; border-bottom: #b3b3b3 1px solid; padding: 10px; text-align: left }


Le champs est dans le #under_header

Code: Tout sélectionner

<div id="under_header" align='center'>
   <table class="under_header_table"><tr>
      <td width='480' align='left'>Chiang Mai Social Life: Where to Be, What to Do, Events, Networking, Classifieds...<br />Find who frequent the same places as you!</td>
      <td align="right">
         <?PHP
         echo "<form method='post' action='/search.php'><div>";
         echo "<input class='search_field' id='SearchField' name='search' type='text' onfocus='if (value == \"Search\") {value =\"\"}' onblur='if (value == \"\") {value = \"Search\"}' value='"; if ($_POST['search']=="") echo "Search"; else echo $_POST['search']; echo "' size='50' /><input class='search_field' type='submit' name='Search' value='Search' />";
         echo "<div id='SearchDiv'></div>";
         ?>
         <script type='text/javascript'>new Ajax.Autocompleter("SearchField", "SearchDiv", "SearchProposal.php", {minChars:3});</script>
         <?PHP
         echo "</div></form>";
         ?>         
      </td>
   </tr></table>
</div>

Voila

[Blount]

Essaie d'enlever les positions "relative".
S'il référence top/left par rapport à la fenêtre, ça peut provoquer ce décalage.

[sim100]

J'ai tout mis en absolute en placant les éléments.

Code: Tout sélectionner

#header { position: absolute; height: 100px; background-color: #b5c07a; width: 100% }
.header_table { width: 960px; padding: 4px }

#under_header { position: absolute; margin-top: 100px; background-color: #D6E0A2; width: 100%; border-bottom: #c7c7c7 1px solid; color: #5b603c; font-size: 11px; z-index: 10 }
.under_header_table { width: 960px; padding: 2px }

#conteneur { position: absolute; background-image: url(design/bg.png); margin-top: 137px; background-repeat:repeat-x; background-color: #dcd4bb; width: 100%; z-index: 0 }
#home_center_table { width: 940px; background-color: #fff; border-left: #b3b3b3 1px solid; border-right: #b3b3b3 1px solid; border-bottom: #b3b3b3 1px solid; padding: 10px; text-align: left }

Idem sur IE, un décalage, parfait sur FF

Je craque

[Blount]

Quand je disais de virer les "relative", c'était d'enlever complètement "position"

[sim100]

Oui j'entends bien mais je faisais mes testes avant d'avoir lu ta réponse.
Je n'attends pas forcément qu'on m'offre la solution sur un plateau

Je fais des recherches et des testes.

Merci pour l'aide en tout cas