Sujet Précédent Sujet Suivant

Décalage entre IE/Firefox et Google Chrome

Résolu
BenamourJr Messages postés 31 Date d'inscription jeudi 25 mars 2010 Statut Membre Dernière intervention 18 septembre 2010 - 7 avril 2010 à 17:28
nhervagault Messages postés 6063 Date d'inscription dimanche 13 avril 2003 Statut Membre 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 !

5 réponses

Réponse 1 / 5
BenamourJr Messages postés 31 Date d'inscription jeudi 25 mars 2010 Statut Membre Dernière intervention 18 septembre 2010 1
8 avril 2010 à 12:38
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 :)
3
Réponse 2 / 5
nhervagault Messages postés 6063 Date d'inscription dimanche 13 avril 2003 Statut Membre Dernière intervention 15 juillet 2011 37
7 avril 2010 à 21:35
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.
0
Réponse 3 / 5
syndrael Messages postés 2378 Date d'inscription lundi 4 février 2002 Statut Membre Dernière intervention 29 décembre 2012 20
8 avril 2010 à 08:25
@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.
0
Réponse 4 / 5
BenamourJr Messages postés 31 Date d'inscription jeudi 25 mars 2010 Statut Membre Dernière intervention 18 septembre 2010 1
8 avril 2010 à 10:12
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
nhervagault Messages postés 6063 Date d'inscription dimanche 13 avril 2003 Statut Membre Dernière intervention 15 juillet 2011 37
8 avril 2010 à 22:39
@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.
0

Discussions similaires

Google mpas api et php
easysofts -
Epoc22 -

2 réponses
problème this et root
mailys6 -
goldenboy68 -

6 réponses
[VB6 -> VBA]Petit détail sur la fonction pile/face
ArthueBesne -
ucfoutu -

26 réponses
SVP j'ai besoin de La solution de ces exercices c urgent
drakula951 -
coq -

2 réponses
erreur dans traduction via api google :"Index and length must refer to a locatio
tkd1984 -
krimog -

3 réponses
Rejoignez-nous