Pb d'affichages différents selon les navigateurs

[xine]

Bonjour,

je viens de faire mon 1er site en utilisant une feuille de style CSS... Autrement dit, je suis plutôt novice.

Malheureusement, je n'avais fait mes tests que sur I.E. 6.0 (sur PC avec Windows), et quelle n'a pas été mon horrible surprise lorsque j'ai commencé à vérifier ça sur Netscape !! (toujours sur mon PC).

Donc, il semblerait que tous les décalages (qui rendent les pages très moches !) soient dûs à une non interprétation du code "background-position" de ma feuille de style CSS par Netscape Navigator...

J'ai constaté cela en enlevant ce style puis en vérifiant sur I.E., et là ça faisait le smême décalages que sur Netscape.

Quelqu'un ou quelqu'une aurait-il (ou aurait-elle) une ou des solutions à mon problème ???

Merci d'avance pour votre aide.

xine

[Dinostrate]

Bonsoir xine et bienvenue sur le Hub.

Quand on se lance dans les feuilles de style, je pense qu'il faut plus que jamais faire tous les tests possibles avec plusieurs navigateurs. Les Ie, opéra, netscape et mozilla par exemple.

Tu verras que parfois, tu peux avoir plusieurs résultats différents. Certains navigateurs respectent mieux les normes que d'autres.... et aussi bien sur, tu peux commettre des erreurs, comme tout le monde.

Si tu veux que quelqu'un puisse t'aider, je te conseille de formuler plus précisément ta question.

Les feuilles de style ne servent pas qu'a positionner des images de fond. Tu devrais nous donner un exemple de ton code en css et en html....

A+

Dino

[Beatnykk]

le "service minimum" étant assuré par un netscape v4.5 ou 5 sur mac (système avant MacOSX), c'est un bon test de base.

si ça passe là, il y a peu de chance de se planter ailleurs.

bien que vérification n'est jamais inutile sur pc (ie nscap mozi opera) etc.

[Guest Hellway]

Personnellement, je développe mon site et ses feuilles de style sur Mozilla. Non seulement, il respecte les standards de façon très concise, mais il a en plus la grande qualité de gérer des standards qui ne sont toujours pas reconnus dans d'autre navigateurs tels que Internet Explorer.

Si tu as un PC, télécharges Mozilla, c'est le seul conseil que je puisse te donner, couplé avec celui de ne pas développer sous i.e. qui a la facheuse tendance de créer ses propres standards...

[xine]

Merci de vos réponses !

Voici l'adresse du site (pas fini) :

http://poele.online.fr/physalis

Et voici le code de ma feuille de style :

body {

margin: 0;

padding: 0;

font-family: verdana, arial, sans-serif;

font-size: 10px;

color: #0033CC;

}

.haut {

background-image: url(../images/page-haut.gif);

background-repeat: no-repeat;

width: 772px;

height: 25px;

}

.head {

background-image: url(../images/fd-head.gif);

background-repeat: no-repeat;

width: 607px;

height: 79px;

margin-left: 165px;

}

.titre {

float: right;

margin-top: 20px;

margin-right: 23px;

border: 0;

}

.gauche {

position: absolute;

left:0px;

background-image: url(../images/fd-menu.jpg);

width: 165px;

height: 192px;

background-repeat: no-repeat;

top: 25px;

}

.gauche1 {

position: absolute;

left:0;

background-image: url(../images/fd-menu.jpg);

width: 165px;

height: 192px;

background-repeat: no-repeat;

}

a.logo {

float: left;

margin-right: 0px;

margin-top: 0px;

width: 145px;

height: 129px;

background: url(../images/logo-menu.gif);

border: 0;

}

a.logo:hover {

background: url(../images/logo-menu2.gif);

}

.preload {

background: url(../images/logo-menu2.gif);

background-repeat: no-repeat;

}

a.menu {

float: right;

margin-right: 5px;

margin-top: 10px;

font-size: 10px;

font-style: normal;

color: #007AC0;

text-decoration: none;

text-align: right;

background-image: url(../images/puce_b.gif);

background-position: right 3px;

background-repeat:no-repeat;

padding-right: 25px;

}

a.menu:hover {

background-image: url(../images/puce_j.gif);

font-weight: bold;

}

.frame1 {

width: 575px;

margin-left: 198px;

overflow: auto;

height: 340px;

}

.frame2 {

width: 575px;

margin-left: 198px;

overflow: auto;

height: 485px;

}

.frame {

width: 575px;

margin-left: 198px;

overflow: auto;

height: 700px;

}

.centre {

margin-left: 198px;

width: 575px;

}

.txt {

width: 552px;

}

a.txt {

font-weight: bold;

color: #FF9900;

text-decoration: none;

}

a.txt:visited {

font-weight: bold;

color: #FF9900;

text-decoration: none;

}

a.txt:hover {

font-weight: bold;

color: #FF0000;

text-decoration: none;

}

.gros {

font-weight: bold;

}

.frameligne {

background-image: url(../images/ligne_j.gif);

background-repeat: repeat-x;

height: 1px;

margin-bottom: 7px;

background-position: right 9px;

margin-top: 10px;

}

.frametitre {

float: left;

font-style: italic;

font-weight: bold;

color: #007AC0;

text-align: left;

padding-right: 3px;

margin-top: 10px;

margin-bottom: 7px;

}

.framepuce {

background-image: url(../images/puce_j.gif);

background-position: left 3px;

background-repeat: no-repeat;

float: left;

padding-right: 3px;

height: 8px;

width: 15px;

}

.frameimage {

float: right;

margin-bottom: 2px;

margin-left: 2px;

font-size: 9px;

color: #007AC0;

font-family: Arial, Helvetica, sans-serif;

text-align: right;

}

.spacer {

clear: both;

}

.fdpresentation {

background-image: url(../images/fd-presentation2.jpg);

background-repeat: no-repeat;

height: 340px;

width: 552px;

vertical-align: middle;

}

Sur un autre forum, quelqu'un vient de me dire que je ne devais pas mélanger des valeurs absolues avec des valeurs en pourcentage. Peut-être que Netscape ne le supporte pas.

Je vais essayer en ne mettant que des valeurs absolues... (pour respecter ma mise en page).

Je vous tiens au courant.

Sinon, merci aussi pour le conseil de télécharger Mozilla, car effectivement, je suis sur PC.

Merci à tous et à + tard (faut que je mange !!)

[xine]

Ça y'est !

Effectivement, en ne mettant que des valeurs absolues et en rejouant sur chaque positionnement (finalement, je n'ai gardé plus que les margin), je suis enfin parvenue à avoir tout correctement placé sur mes pages... Sur Netscape !

Mais au final, à présent c'est sur I.E. 6.0 (PC) qu'il me reste un décalage !!

C'est sous chaque titre + ligne de paragraphe (sur ma feuille de style, respectivement .frametitre et .frameligne) : j'ai mis un margin-bottom de 7px qui est bien respecté sur Netscape, mais sur I.E. l'espace est bien plus grand !

J'ai remarqué qu'en mettant le margin-top de 10px (dont j'ai besoin...) pour la ligne, sur I.E., il en rajoute autant en dessous (qui se rajoute donc à mon margin-bottom de 7px) !!

Je ne sais plus que faire !!!... HELP !

Je vous redonne le code de ma deuille de style CSS :

__________________

body {

margin: 0;

padding: 0;

font-family: verdana, arial, sans-serif;

font-size: 10px;

color: #0033CC;

}

.haut {

background-image: url(../images/page-haut.gif);

background-repeat: no-repeat;

width: 772px;

height: 25px;

}

.head {

background-image: url(../images/fd-head.gif);

background-repeat: no-repeat;

width: 607px;

height: 79px;

margin-left: 165px;

}

.titre {

float: right;

margin-top: 20px;

margin-right: 23px;

border: 0;

}

.gauche {

position: absolute;

left:0px;

background-image: url(../images/fd-menu.jpg);

width: 165px;

height: 192px;

background-repeat: no-repeat;

top: 25px;

}

.gauche1 {

position: absolute;

left:0;

background-image: url(../images/fd-menu.jpg);

width: 165px;

height: 192px;

background-repeat: no-repeat;

}

a.logo {

float: left;

margin-right: 0px;

margin-top: 0px;

width: 145px;

height: 129px;

background: url(../images/logo-menu.gif);

border: 0;

}

a.logo:hover {

background: url(../images/logo-menu2.gif);

}

.preload {

background: url(../images/logo-menu2.gif);

background-repeat: no-repeat;

}

a.menu {

float: right;

margin-right: 5px;

margin-top: 10px;

font-size: 10px;

font-style: normal;

color: #007AC0;

text-decoration: none;

text-align: right;

background-image: url(../images/puce_b.gif);

background-position: 145px 3px;

background-repeat:no-repeat;

padding-right: 25px;

width: 135px;

}

a.menu:hover {

background-image: url(../images/puce_j.gif);

font-weight: bold;

}

.frame1 {

width: 575px;

margin-left: 198px;

overflow: auto;

height: 340px;

}

.frame2 {

width: 575px;

margin-left: 198px;

overflow: auto;

height: 485px;

}

.frame {

width: 575px;

margin-left: 198px;

overflow: auto;

height: 700px;

}

.centre {

margin-left: 198px;

width: 575px;

}

.txt {

width: 552px;

}

a.txt {

font-weight: bold;

color: #FF9900;

text-decoration: none;

}

a.txt:visited {

font-weight: bold;

color: #FF9900;

text-decoration: none;

}

a.txt:hover {

font-weight: bold;

color: #FF0000;

text-decoration: none;

}

.gros {

font-weight: bold;

}

.frameligne {

background-image: url(../images/ligne_j.gif);

background-repeat: repeat-x;

margin-top: 10px;

height: 1px;

margin-bottom: 7px;

}

.frametitre {

float: left;

font-style: italic;

font-weight: bold;

color: #007AC0;

text-align: left;

padding-right: 3px;

background-color: #FFFFFF;

}

.framepuce {

background-image: url(../images/puce_j.gif);

background-repeat: no-repeat;

float: left;

padding-right: 3px;

height: 8px;

width: 15px;

margin-top: 3px;

margin-bottom: -3px;

}

.frameimage {

float: right;

margin-bottom: 2px;

margin-left: 2px;

font-size: 9px;

color: #007AC0;

font-family: Arial, Helvetica, sans-serif;

text-align: right;

}

.spacer {

clear: both;

}

.fdpresentation {

background-image: url(../images/fd-presentation2.jpg);

background-repeat: no-repeat;

height: 340px;

width: 552px;

vertical-align: middle;

}

______________________

Et je vous redonne l'adresse pour voir les pages qu'i faut comparer sur I.E. et Netscape... :

http://poele.online.fr/physalis

Merci encore pour votre aide !...