Alignement champ et fenêtre auto-completer

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par sim100, 29 Mars 2011.

  1. sim100
    sim100 WRInaute passionné
    Inscrit:
    2 Février 2003
    Messages:
    1 379
    J'aime reçus:
    1
    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

    [​IMG]
     
  2. Blount
    Blount WRInaute impliqué
    Inscrit:
    18 Novembre 2010
    Messages:
    707
    J'aime reçus:
    0
    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.
     
  3. sim100
    sim100 WRInaute passionné
    Inscrit:
    2 Février 2003
    Messages:
    1 379
    J'aime reçus:
    1
    La liste déroulante c'est des ul et li
    Code:
    .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
     
  4. Blount
    Blount WRInaute impliqué
    Inscrit:
    18 Novembre 2010
    Messages:
    707
    J'aime reçus:
    0
    Montre ta structure HTML.
    Comment tu intègres cette liste ? Position absolue, relative ?
    Via JS ? Directement par CSS ?
     
  5. sim100
    sim100 WRInaute passionné
    Inscrit:
    2 Février 2003
    Messages:
    1 379
    J'aime reçus:
    1
    Pour la structure, c'est
    Code:
    #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:
    <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 :D
     
  6. Blount
    Blount WRInaute impliqué
    Inscrit:
    18 Novembre 2010
    Messages:
    707
    J'aime reçus:
    0
    Essaie d'enlever les positions "relative".
    S'il référence top/left par rapport à la fenêtre, ça peut provoquer ce décalage.
     
  7. sim100
    sim100 WRInaute passionné
    Inscrit:
    2 Février 2003
    Messages:
    1 379
    J'aime reçus:
    1
    J'ai tout mis en absolute en placant les éléments.

    Code:
    #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 :(
     
  8. Blount
    Blount WRInaute impliqué
    Inscrit:
    18 Novembre 2010
    Messages:
    707
    J'aime reçus:
    0
    Quand je disais de virer les "relative", c'était d'enlever complètement "position" ;)
     
  9. sim100
    sim100 WRInaute passionné
    Inscrit:
    2 Février 2003
    Messages:
    1 379
    J'aime reçus:
    1
    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
     
Chargement...
Similar Threads - Alignement fenêtre auto Forum Date
Interro surprise pour les rois du CSS : Alignement en diagonale Développement d'un site Web ou d'une appli mobile 23 Juillet 2015
Alignement des images dans une galerie de miniatures Développement d'un site Web ou d'une appli mobile 23 Janvier 2015
[CSS] Alignement de cadre. Développement d'un site Web ou d'une appli mobile 24 Mai 2013
Alignement CSS + image Développement d'un site Web ou d'une appli mobile 17 Novembre 2012
[CSS] Alignement vertical du texte Développement d'un site Web ou d'une appli mobile 20 Avril 2011
probleme alignement bouton en html Développement d'un site Web ou d'une appli mobile 14 Décembre 2010
menu horizontal défilant en css...un problème d'alignement Développement d'un site Web ou d'une appli mobile 1 Novembre 2010
Auto-Alignement d'une page web Développement d'un site Web ou d'une appli mobile 28 Octobre 2010
Problème d'alignement vertical en css Développement d'un site Web ou d'une appli mobile 14 Septembre 2010
css alignement input IE et firefox : perte de cheveux ! RESOLU Développement d'un site Web ou d'une appli mobile 5 Janvier 2010
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice