Apparence menu CSS différente en local et sur serveur

09 mars 2011, 09:22

Bonjour à toutes et à tous,

Bon ! J'ai fait une petite recherche sur le forum mais je n'ai pas trouvé de sujet correspondant à mon problème.

J'utilise un menu déroulant horizontal pour mon site (http://zemickyunivers.free.Fr). Sous Firefox, que ce soit en local avec XAMPP ou une fois hébergé sur Free, mon menu fonctionne parfaitement.

Avec IE8 (je n'ai pas testé avec IE7) c'est une autre histoire. En local le menu fonctionne bien, comme Firefox. Par contre sur le serveur de Free il décale trop mes sous-menus vers la droite et il efface le Padding haut et bas. De plus il interprète mal ma barre (hr) sous l'éphéméride, normalement elle est rouge.

Donc pour résumer :

Firefox local --> OK
Firefox serveur --> OK
IE8 (IE7 ?) local --> OK
IE8 (IE7 ?) serveur --> KO

Voici la partie de mon CSS concernant mon menu, parce que j'ai l'impression que ça vient de là :

Code : Tout sélectionner


/* Navigation : Menu horizontal */

#navigation {
	margin: 10px 0px 10px 0px;
    display: block;
    background: #000000;
   	color: #d1d1d1;
    border-top: 1px solid #86150c;
    border-bottom: 1px solid #86150c;
    line-height: 1.5;
    font-size: .9em;
}
#navigation ul {
    overflow: hidden;
    list-style: none;
}
#navigation li {
    float: left;
    width: 105px;
    text-align: center;
}
#navigation ul li ul {
    display:none;
    position:absolute;
    border-top: 1px solid #86150c;
    border-bottom: 1px solid #86150c;
    background-color: #000000;
    margin: 0 0 0 40px;
    padding: 2px 5px;
}
#navigation ul li ul li{
    width: 110px;
    text-align: left;
}
#navigation ul li:hover ul {
    display:block;
}
#navigation li:hover ul li {
    float:none;
}

Si vous avez une idée n'hésitez pas.

Merci.

Micky

09 mars 2011, 12:32

Bonjour,

il peut s'agir d'un problème de cache éventuellement?
Sinon essaye de comparer les sources html générée (en local et en prod) avec un logiciel genre meld, winmerge, etc...
Il y a peut-être des espaces ajoutés, et/ou des sauts de ligne que IE ne comprend pas.

13 mars 2011, 18:57

Bonjour,

Et bien j'ai comparé les sources HTML local et serveur... et rien, elles sont identiques. Pour le cache c'est pareil, complètement vide. Et toujours rien !

Un autre idée peut-être ?

Merci

Micky

14 mars 2011, 23:43

Bonjour,

Tu devrais peut être remettre à zéro les margin et padding en début de ton fichier css.
Car chaque navigateur a des valeurs d'origines différentes pour les margin et padding par défaut.

Code : Tout sélectionner

* {
margin: 0;
padding: 0;
}

par contre le signe étoile va réinitialiser toutes les valeurs et surement decaller ta mise en page donc si c'est juste pour le menu

Code : Tout sélectionner

ul, li {
margin: 0;
padding: 0;
}

En espérant t'aider

15 mars 2011, 12:15

Merci beaucoup pour ton aide, je vais tester ça au plus tôt.

Toutefois je dépose ici l'intégralité de mon CSS, au cas où quelqu'un y verrait quelque chose :

Code : Tout sélectionner


/* Html et Body */

html {
	font-size: 100%; /* --> Note 1 */
}

body {
	margin: 0;
	padding: 10px 20px; /* -> Note 2 */
	font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
	font-size: .8em; /* -> Note 3 */
	line-height: 1.25; /* -> Note 4 */
    color: #8a8a8a;
    background: #202020;
}

/* Global : Contient #entete, #navigation et #centre */

#global {
    width: 800px;
    margin: 0 auto;
}

/* En-tête : Partie haute de la page contenant l'image du titre */

#entete {
    margin:5px 0px 0px 0px;
    background-image:url(img/titre.jpg);
    height: 150px;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #86150c;
}
#entete h1 {
    margin: 0;
}
#entete h1 img {
    float: left;
    margin: 7px 20px 10px 0;
}
#entete .sous-titre {
    margin: 4px 0 15px 0;
}

/* Navigation : Menu horizontal */

#navigation {
	margin: 10px 0px 10px 0px;
    display: block;
    background: #000000;
   	color: #d1d1d1;
    border-top: 1px solid #86150c;
    border-bottom: 1px solid #86150c;
    line-height: 1.5;
    font-size: .9em;
}
#navigation ul {
    overflow: hidden;
    list-style: none;
}
#navigation li {
    float: left;
    width: 105px;
    text-align: center;
}
#navigation ul li ul {
    display:none;
    position:absolute;
    border-top: 1px solid #86150c;
    border-bottom: 1px solid #86150c;
    background-color: #000000;
    margin: 0 0 0 40px;
    padding: 2px 5px;
}
#navigation ul li ul li{
    width: 110px;
    text-align: left;
}
#navigation ul li:hover ul {
    display:block;
}
#navigation li:hover ul li {
    float:none;
}

/* Centre : Bloc central contenant #contenu et le menu vertical à gauche */

#centre {
    background: url(img/fond.png) repeat-y;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #86150c;
    width: 100%;
    overflow: hidden;
}

/* Ephéméride : Apparait dans le menu vertical de gauche dans la page d'accueil et la page de contact */

#ephemeride {
    width: 160px;
    padding: 10px;
    float: left;
    font-size: 0.8em;
    text-align: center;
}

/* Contenu : Partie principale de la page */

#contenu {
    color: #8a8a8a;
    background: #000000;
    overflow: auto;
    margin-left: 200px;
    padding: 10px 20px;
}
#contenu a {
    color: #d1d1d1;
}
#contenu a:hover, #contenu a:focus {
    color: #ce1215;
}
#contenu > :first-child {
    margin-top: 10px;
}
#contenu p, #contenu li {
    line-height: 1.5;
}

/* Titres */

h1, h2, h3, h5 {
	margin: 1em 0 .5em 0; /* -> Note 5 */
}
h1, h2 {
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
	font-weight: normal; /* -> Note 6 */
	text-align: center;
}
h1 {
	font-size: 3em; /* -> Note 7 */
	font-style: italic;
}
h2 {font-size: 1.8em;}
h3 {font-size: 1.2em;}
h4 {font-size: 1.0em;}
h5 {
	font-size: .8em;
	text-align: center;
}

/* Listes */

ul, ol {
	margin: .75em 0 .75em 24px;
	padding: 0; /* -> Note 8 */
}
ul {
	list-style: square;
}
li {
	margin: 0;
	padding: 0;
}

/* Liens */

a {
    color: #d1d1d1;
	text-decoration: none;
}
a:hover, a:focus {
    color: #ce1215;
}
a img {
	border: 1px solid #86150c; /* Note -> 9 */
}
a:hover img {
	border: 1px solid #ce1215;
}
strong {
    color: #8a8a8a;
}

/* Citations */

blockquote, q {
	font-size: 1.1em;
	font-style: italic;
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
}
blockquote {
	margin: .75em 0 .75em 24px;
}
cite {
	font-style: italic;
}

/* Tableaux */

table	{
	margin-left:auto;			/* -> Note 11 */
	margin-right:auto;			/* -> Note 11 */
	font-size: 0.8em;
}

/* Formatage spécifique pour les tableaux */

/* Tableau de la page ../bisca_bande_dingues.php */

table.dingues	{
	border-collapse: collapse;
}
table.dingues td.dingues {
	font-size: 1.0em;
	text-align: center;
	width: 150px;
	border: solid 1px #86150c;
	vertical-align: middle;
	height: auto;
}
td.centre {
	text-align: center;
}

/* Tableau de la page ../saintes_geo.php */

table.saintes	{
	border-collapse: collapse;
}
table.saintes td.saintes {
	width: 250px;
	border: solid 1px #86150c;
	height: auto;
}
td.saintescenter {
	text-align: center;
	width: 250px;
	border: solid 1px #86150c;
	height: auto;
}

/* Pour les pages contenant des images à afficher sous forme d'album */

table.album	{
	font-size: 0.8em;
}
td.album	{
	vertical-align: top;
	width: 150px;
	height: 140px;
}
tr.album {
	text-align: center;
}

/* Paragraphes */

p {
	margin: .75em 0;
}
li p, blockquote p {
	margin: .5em 0;
}
p.pcenter {				/* -> Note 10 */
	margin: .75em 0;
	text-align: center;
}
p.pright {
	margin: .75em 0;
	text-align: right;
}
p.pstrong {
	margin: .75em 0;
	font-weight: bold;
}

/* Pied de page */

#pied {
    margin: 0;
    padding: 5px 20px 5px 0;
    font-size: .85em;
}

/* Divers éléments */

em {
	font-style: italic;
}
.hr {
	width: 100%;
	background-color: #86150c;
	height: 1px;
	border :none;
}
span.redcolor {
	color: #ce1215;
}
span.soulign {
	text-decoration : underline;
}
img.redborder	{
	border: solid 1px #86150c;
}

Micky

17 mars 2011, 18:04

Bonjour,

Je reviens vers vous car la solution de Mad-System ne donne pas de résultats concluants.

Est-ce quelqu'un aurait une autre idée pour mon problème ?

Micky

15 juin 2011, 09:52

Bien, je reviens après un petit moment d'absence pour faire le point sur ce sujet.

Problème résolu pour IE7. Ne me demandez pas comment cela s'est produit, je n'en sais rien. Je tente de me connecter il y a 15 jours sur mon site avec IE7 et tout fonctionne normalement. Idem pour IE8 et IE9, en local et sur le serveur.

Mais... et oui, il y a un mais, sur Google Chrome et Safari, j'ai une colonne qui s'incruste sur une bonne partie du côté droit de mon div "contenu". Cela fait comme si j'avais un margin-right. Ca me créé donc des problèmes d'affichage. Au passage, quand je teste mon site sur mon téléphone Blackberry c'est le même problème.

Quelqu'un sait-il pourquoi ces browsers agissent de la sorte ?

Par avance merci

Micky

16 juin 2011, 15:36

Petit UP du jour.

Merci.

Micky

17 juin 2011, 23:11

salut ::

1. les modos n'aiment pas les "up" ...

2. pour rapidement et en toute impartialité tester ton design sous différents navigateur test les aplis dans le style de browsershoot

3. parfois il est plus facile de demander de l'aide en permettant aux autres d'avoir accès au problème en question ... un lien ?

20 juin 2011, 10:03

Bonjour,

1. Désolé pour les "UP".

2. J'avais déjà testé ma page sur browsershots et j'ai également installé Safari, Google Chrome et Opéra en plus de Firefox et IE sur mon PC. C'est pour cela que j'affirme que Safari et Google Chrome me posent des souci d'affichage de ma page.

3. Le lien vers mon site apparait dans le premier message de ce sujet. Le voici de nouveau : http://zemickyunivers.free.fr

Donc je réitère ma question : Est-ce que quelqu'un pourrait me dire pourquoi Google Chrome et Safari me rognent la partie droite du contenu principal de ma page ?

Merci.

Micky

01 juil. 2011, 18:48

Vires le overflow:auto ; base.css L~111

04 juil. 2011, 16:44

Bonjour,

Merci pour la réponse, ça a l'air d'être OK. Du moins sur mon Blackberry ça fonctionne. Je vais tester ça un peu plus chez moi et je reviens poster un peu plus tard pour confirmer.

Cependant, à tout hasard, une petite question : pourquoi cette différence avec l'overflow entre les navigateurs ?

@+

Micky

23 avr. 2012, 22:46

Bonjour,

J'ai eu le même problème que toi en essayant sur free!

par contre, ca marchait avec mozilla

Aprés avoir uploadé sur mon site http://www.infosafe.fr/, sur un répertoire de test, le bug a disparu comme , que ce soit avec mozilla ou IE.

Vive l'informatique, tout ça pour des coffres-forts...

25 avr. 2012, 16:29

Bonjour,

IE notre ami de toujours.
J'avais le même problème et la solution qui m'a sauvé est celle-ci :
dans IE appuyer sur F12 (developper tools) et en haut de la fenêtre qui s'ouvre il y a 2 boutons :
- browser mode
- document mode

Il faut comparer les valeurs de ces boutons entre les 2 sites (local et serveur) et chez moi il y avait une différence :
- En local le "document mode" : IE8 standard
- Sur le serveur le "document mode" : IE7 standard

walou, en esperant que ça aidera ceux qui tomberont sur le sujet

10 mai 2012, 13:32

Bonjour,

Et bien je confirme que tout fonctionne pour le mieux. Je pense que Free met un certain temps avant d'appliquer sur ses serveurs les mises à jour nécessaires au bon fonctionnement des sites sur tout les navigateurs.

Quoi qu'il en soit le sujet est clos.

Micky

Apparence menu CSS différente en local et sur serveur

Qui est en ligne