begin process at 2012 05 30 13:36:11
  Trouver un code source :
 
dans
 
Accueil > Forum > 

PHP

 > 

Web 2.0

 > 

CSS

 > 

Décalage entre IE/Firefox et Google Chrome


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Décalage entre IE/Firefox et Google Chrome

mercredi 7 avril 2010 à 17:28:26 | Décalage entre IE/Firefox et Google Chrome

BenamourJr

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
Code HTML :
// avatar
echo '<img class="avatar" src="avatar/none.png" />';

// formulaire de connexion
?>
<form method="post" action="connexion.php">
	<input type="text" name="pseudo" value='Pseudo' size="19" class="login" onFocus="if(this.value=='Pseudo')this.value=''" />
	<input type="password" name="mdp" value='Mot de passe' size="19" class="mdp" onFocus="if(this.value=='Mot de passe')this.value=''" />
	<input type="checkbox" name="cookie" id="cookie" checked="checked" class="connexion_auto" /><label class="connexion_auto_label" for="cookie">Connexion automatique</label>
	<input src="bouton-go.png" type="image" value="submit" name="valider" class="go" />
</form>
<span class="lien_connexion"><a href="creer_compte.php"><font color="white">S'inscrire</font></a> | <a href="retrouver_compte.php"><font color="white">Identifiants oubliés</font></a></span>
<?php


menu-bas.php
Code HTML :
<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>
<input type='texte' name='recherche' class="formulaire_recherche_input" value=' Recherche' onFocus="if(this.value==' Recherche')this.value=''" />
<input type="submit" class="formulaire_recherche_submit" value="GO" name="go" />
</form>


Feuille de style
Code :
/* 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 !
mercredi 7 avril 2010 à 21:35:04 | Re : Décalage entre IE/Firefox et Google Chrome

nhervagault

Administrateur CodeS-SourceS
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.
jeudi 8 avril 2010 à 08:25:45 | Re : Décalage entre IE/Firefox et Google Chrome

syndrael

@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.
jeudi 8 avril 2010 à 10:12:26 | Re : Décalage entre IE/Firefox et Google Chrome

BenamourJr

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
jeudi 8 avril 2010 à 12:38:58 | Re : Décalage entre IE/Firefox et Google Chrome

BenamourJr

Réponse acceptée !
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 :)
jeudi 8 avril 2010 à 22:39:36 | Re : Décalage entre IE/Firefox et Google Chrome

nhervagault

Administrateur CodeS-SourceS
@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.



Cette discussion est classée dans : font, recherche, position, color, relative


Répondre à ce message

Sujets en rapport avec ce message

barre de défileement horizontale trop longue [ par BenamourJr ] Je viens de positionner quelques éléments de mon design via CSS et j'ai remarqué que depuis la barre de défilement horizontale est trop longue par rap css position relative//absolute [ par lowkey ] Salut à tous !Voici mon probleme : J'ai 3 imbriqués. Le premier est en position relative, le second en absolute pour avoir un placement par rapport a mes sous menu son tjr visible je veut les cacher [ par ramirez21000 ] voila mon travail mon probleme que mon menu ne se ferme pas les sous menu sont tjr visible je veut les cacher sauf siDocument sans titre<style type="t passer un parametre à la 3eme page, impossible de faire avec $_POST [ par amel001 ] Bonjour,bjrj'ai 3fichiersje fait l'authentification puis elle s'affiche la page filiere.php et quand je choisi une filiere normalement il affiche ce q ajout piece jointe formulaire [ par fabriceee59 ] bonsoir a tousJ'ai ici un exemple de script php :je n'arrive pas a y ajouter une piece jointe pouvez vous m'aidez a le Compatibilité avec firefox et google chrome [ par rahhalmahassen ] Bonjour, J'ai un probléme d'affichage du contenue de [url=http://www.juridique-enligne.com/avocat-gratuit/aide-juridique]ma page web[/url].En effet,el moteur de recherche [ par aminagu ] j essey de faire un moteur de recherche , et ça me donne l erreur suivante [color=yellow]Erreur : SQLSTATE[42000]: Syntax error or access violation: Probléme d'incompatibilité de CSS entre Internet Explorer et FireFox [ par furiouskiller ] Salut tout le monde, Je me demande si quelqu'un peut m'aider à résoudre ce probléme de compabitilité de CSS. au fait j'ai developpé un site web qui ma créer formulaire avec zone de texte - menu déroulant (1 choix) - upload fichier [ par sokebana ] Bonjourje débute complètement et bien entendu je veux un formulaire bien trop complexe pour moi...j'ai réussi à faire un formulaire simple avec que de stylesheet [ par mounir999 ] salut   je suis debutant en Microsft Visual Studio 2008, je voulais créer une page web avec un bon design alors j'ai telecharger un fichier de style q


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,466 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales