Décalage entre IE/Firefox et Google Chrome [Résolu]

Messages postés
31
Date d'inscription
jeudi 25 mars 2010
Statut
Membre
Dernière intervention
18 septembre 2010
- - Dernière réponse : nhervagault
Messages postés
6063
Date d'inscription
dimanche 13 avril 2003
Statut
Modérateur
Dernière intervention
15 juillet 2011
- 8 avril 2010 à 22:39
Bonjour,

J'ai un problème de décalage de mes éléments positionnés via position: relative (j'ai essayé en absolute et ca ne change absolument rien). J'espère que l'un de vous pourra m'aider, je vous explique...

Voici le rendu de ma page sur Firefox ou IE (tout est correcte) :
http://e-storia.info/ie-ff.jpg

Et celui sur Google Chrome (décalage de la zone connexion et de la barre de recherche):
http://e-storia.info/google-chrome.jpg

J'ai remarqué par exemple que pour la barre de recherche décalée (en bas de la bannière), l'espace entre chaque élément du formulaire est différent...

Je vous copie/colle le code de la bannière, du menu du bas (formulaire de recherche) ainsi que ma feuille de style, et je croise les doigts de tomber sur un pro du positionnement en CSS :p

banniere.php
// avatar
echo '';

// formulaire de connexion
?>
<form method= "post" action="connexion.php">


<label class="connexion_auto_label" for="cookie">Connexion automatique</label>

</form>
[creer_compte.php S'inscrire] | [retrouver_compte.php Identifiants oubliés]
<?php


menu-bas.php
<form class ="formulaire_recherche" method="post" action="recherche.php">
<select name="type" class="formulaire_recherche_select"><option value="individu">individu</option><option value="organisation">organisation</option><option value="pays">pays</option><option value="dossier">thème</option></select>


</form>


Feuille de style
/* Généralités */

body
{
width: 960px;
margin: auto;
margin-top: 15px; 
margin-bottom: 15px;
font-family: "Trebuchet MS", serif;
font-size: 15px;
background-image: url("background-newspaper.gif");
}

a
{
text-decoration: none;
}

a:visited
{
color: blue;
}

.msg_erreur
{
color: #f60909;
}

/* Blocks composants le design */

#menu-haut
{
width: 960px;
height: 30px;
}

#banniere
{
width: 960px;
height: 150px;
background-image: url("banniere2.jpg");
background-repeat: no-repeat;
}

#menu-bas
{
width: 960px;
height: 47px;
background-image: url("recherche.png");
background-repeat: no-repeat;
}

#corps-haut
{
width: 960px;
height: 47px;
text-align: right;
}

#corps
{
width: 940px;
padding: 8px;
border: 2px solid #000000;
background-color: #ffffff;
}

/* Espace membre */

.avatar
{
position: relative;
left: 650px;
top: 25px;
}

/* Espace membre : non-connecté */

.login
{
position: relative;
left: 768px;
bottom: 121px;
}

.mdp
{
position: relative;
left: 623px;
bottom: 85px;
}

.connexion_auto
{
position: relative;
left: 474px;
bottom: 51px;
}

.connexion_auto_label
{
color: #ffffff;
font-size: 13px;
position: relative;
left: 477px;
bottom: 52px;
}

.go
{
position: relative;
left: 467px;
bottom: 80px;
}

.lien_connexion 
{
color: #ffffff;
font-size: 13px;
position: relative;
left: 765px;
bottom: 47px;
}

/* Espace membre : connecté */

.pseudo
{
color: #ffffff;
}

/* Formulaire de recherche (menu-bas) */

.formulaire_recherche
{
position: relative;
top: 9px;
left: 14px;
}

.formulaire_recherche_select
{
font-family: "Trebuchet MS", serif;
font-weight: bold;
font-size: 15px;
   	border: 2px solid #ffffff;
background-color: #000000;
color: #ffffff;
}

.formulaire_recherche_input
{
font-family: "Trebuchet MS", serif;
font-weight: bold;
font-size: 15px;
border: 2px solid #ffffff;
background-color: #000000;
color: #ffffff;
}

.formulaire_recherche_submit
{
font-family: "Trebuchet MS", serif;
font-weight: bold;
font-size: 15px;
}


Merci à celui qui saura m'orienter !
Afficher la suite 

5 réponses

Meilleure réponse
Messages postés
31
Date d'inscription
jeudi 25 mars 2010
Statut
Membre
Dernière intervention
18 septembre 2010
1
3
Merci
Problème résolu en plaçant div#bannière en relative puis en plaçant les différents éléments du formulaire en absolute, tout simplement :)

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 190 internautes nous ont dit merci ce mois-ci

Commenter la réponse de BenamourJr
Messages postés
6063
Date d'inscription
dimanche 13 avril 2003
Statut
Modérateur
Dernière intervention
15 juillet 2011
22
0
Merci
Salut,

Je ne connais pas trop le comportement de google,
les != sites que j'ai fais sont plus sur IE et FF

Voici un hack pour les != navigateurs.

http://ethtezahl.over-blog.com/article-25217445.html

En attendant une autre reponse

Evites de programmer avec des name utilise des ID (c'est peut etre la le probleme)

Bon dev.
Commenter la réponse de nhervagault
Messages postés
2382
Date d'inscription
lundi 4 février 2002
Statut
Membre
Dernière intervention
29 décembre 2012
11
0
Merci
@nhervagault:
Evites de programmer avec des name utilise des ID (c'est peut etre la le probleme)

euh.. tu récupères comment les valeurs en POST ??
@BenamourJr:
Par contre je te conseille de commencer ton code par un CSS qui reset les propriétés par défaut de body, form, p etc..
Google est ton ami: demande lui 'reset css' et tu verras sa réponse..
S.
Commenter la réponse de syndrael
Messages postés
31
Date d'inscription
jeudi 25 mars 2010
Statut
Membre
Dernière intervention
18 septembre 2010
1
0
Merci
Merci pour vos réponses.
Je viens d'essayer le reset CSS de Mr Meyer mais sans succès... le problème de décalage reste identique.
J'utiliserais le hack en dernier recours, si vraiment aucune solution plus propre n'est trouvée :p
Commenter la réponse de BenamourJr
Messages postés
6063
Date d'inscription
dimanche 13 avril 2003
Statut
Modérateur
Dernière intervention
15 juillet 2011
22
0
Merci
@syndrael

Les name doivent etre remplacé par des id,
les name c'est de l'epoque de IE4, c'est encore présent sur ie et ff
mais ne fait pas parti de la norme xhtml.
Commenter la réponse de nhervagault