Page 1 sur 1
Apparence menu CSS différente en local et sur serveur
Posté : 09 mars 2011, 09:22
par bisca330
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
Re: Apparence menu CSS différente en local et sur serveur
Posté : 09 mars 2011, 12:32
par jojolapine
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.
Re: Apparence menu CSS différente en local et sur serveur
Posté : 13 mars 2011, 18:57
par bisca330
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
Re: Apparence menu CSS différente en local et sur serveur
Posté : 14 mars 2011, 23:43
par Mad-System
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.
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
En espérant t'aider
Re: Apparence menu CSS différente en local et sur serveur
Posté : 15 mars 2011, 12:15
par bisca330
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
Re: Apparence menu CSS différente en local et sur serveur
Posté : 17 mars 2011, 18:04
par bisca330
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
Re: Apparence menu CSS différente en local et sur serveur
Posté : 15 juin 2011, 09:52
par bisca330
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
Re: Apparence menu CSS différente en local et sur serveur
Posté : 16 juin 2011, 15:36
par bisca330
Petit UP du jour.
Merci.
Micky
Re: Apparence menu CSS différente en local et sur serveur
Posté : 17 juin 2011, 23:11
par Nours312
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 ?
Re: Apparence menu CSS différente en local et sur serveur
Posté : 20 juin 2011, 10:03
par bisca330
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
Re: Apparence menu CSS différente en local et sur serveur
Posté : 01 juil. 2011, 18:48
par Nours312
Vires le overflow:auto ; base.css L~111
Re: Apparence menu CSS différente en local et sur serveur
Posté : 04 juil. 2011, 16:44
par bisca330
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
Re: Apparence menu CSS différente en local et sur serveur
Posté : 23 avr. 2012, 22:46
par Christophher
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...
Re: Apparence menu CSS différente en local et sur serveur
Posté : 25 avr. 2012, 16:29
par gregooz
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
Re: Apparence menu CSS différente en local et sur serveur
Posté : 10 mai 2012, 13:32
par bisca330
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