28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Je suis en phase de création d'un nouveau théme grephique pour mon site, mais je suis confronté à un probléme d'affichage avec Google Chrome.

J'ai mis une barre horizontale en position fixed (elle suit le scroll de la souris), dans cette barre on retrouve un bloc de recherche qui est décalé vers le bas sous Google Chrome.

Pour illustrer mon problème, une petite image.
La partie du haut correpond à l'affichage sous FF et IE.
La partie du bas correspond à l'affichage sous Chrome.

Avez-vous une solution pour mon souci ?

Merci de vos réponses Smiley biggrin

Partie html :
<div style="display: block;" id="barre_haut">
		<div id="barre_haut_gauche">
			<a href="/ucp.php">Mon compte</a>
			&bull; <a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>

		</div>
		<div id="barre_haut_droite">
			 <a href="/chat.php">Chat : <script language="javascript" src="http://www.tontchat.com/api/logon_users.php?group=rty"></script> connect&eacute;s</a>
			&bull; {CURRENT_TIME}
			
				<div id="bhaut_recherche">
				<form action="./search.php" method="post">
					<fieldset>
						<input name="keywords" id="recherche-submit" type="text" maxlength="128" title="Recherche par mots-cles" value="Recherche" onclick="if(this.value=='Recherche')this.value='';" onblur="if(this.value=='')this.value='Recherche';" />
						<input id="recherche-ok" value="" type="submit" />
					</fieldset>
				</form>
			</div>
		</div>
	
	</div>


Partie CSS :

#barre_haut{position:fixed;width:100%; margin-top: -20px;height:20px;z-index:99999;background-color:#4C6784; border-bottom:2px solid #394D63;font-family:Arial; font-size:9pt;color: white; font-weight:bold;}

#barre_haut_gauche {float : left; padding-left:15px; padding-top:2px;}
#barre_haut_droite{float : right; padding-right:15px; padding-top:2px;}
#barre_haut a {color: #FFFFFF;text-decoration: none;}
#barre_haut a:hover {color:#FFC14B;}
#barre_haut_droite a{color:#FFC14B;}

#bhaut_recherche{float : right;margin: -2px 0px 0 10px;}
#recherche-submit{font-family:Arial; font-size:9pt;color: #4C6784;border: none;height: 16px;width: 73px;padding-left: 7px;background:  url("{T_THEME_PATH}/img/recherche2.gif") 0 0 no-repeat;background-color: white;}
#recherche-ok{height: 16px;border: none;width: 26px;margin-left: -4px;background:  url("{T_THEME_PATH}/img/recherche.gif") right top no-repeat;}
Au hasard, je dirais que par défaut, Chrome applique des marges et/ou padding à l'élément fieldset.
Pour le savoir, tu peux utiliser l'excellente extension Firebug pour Firefox, afin d'inspecter ton code.