Page HTML différente entre Chrome et Firefox

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Page HTML différente entre Chrome et Firefox

Message par kiarie Mer 16 Mar 2016 - 23:27

Bonjour,

Je viens de coder une fiche de pub pour mon forum (fiche qu'on s'échange entre partenaire) sous chrome et suis arrivé au résultat voulu mais voila qu'en regardant ma fiche sous firefox le rendu n'est pas du tout le même pour ne pas tout simplement dire qu'il est dégueulasse. Alors voila, je ne comprends pas pourquoi une telle différence d'affichage entre les deux navigateurs surtout que je me suis servis exactement du même codage pour faire un PA qui lui s'affiche parfaitement bien sous chrome et firefox.

Voici la page de mon codage: http://blackeden.forumactif.org/h1-fiche-pub-black-eden-n1
et mon code:
Code:
<style>
body, tr, td {
 cursor: crosshair;
 font-family: calibri;
 font-size: 12pt;
 font-color: #40313B;}
 
a:link {color: #6B323A;}
a:visited {color: #6B323A;}
a:hover {color: #40313B;}
a:active {color: #40313B;}

.fondtitreforumpa{
  margin:30px;
  padding:-20px;
  text-align:center;
  position:relative;
  line-height:10px;
  box-shadow:0 15px 0 0 #6B323A inset;
  width:500px;
}
.fondtitreforumpa span{
  background-color:#6B323A;
  padding:0 0px;
}
.titreforumpa {
  font-size: 60px;
  font-family: 'Shadows Into Light', cursive;
  text-shadow: 2px 2px 0px #B1AAB5;
  color: #40313B;
}
.cadrepa {
  background-color: #E8E4ED;
  box-shadow: 0px 0px 5px #E8E4ED;
  font-family: calibri;
  font-size: 12px;
  color: #40313B;
  display: block;
  padding-left: 10px;
  padding-right: 10px;
  text-align:justify;
  line-height: 15px;
  border-bottom: 2px solid #40313B;
}
.titrepa {
  font-size: 20px;
  letter-spacing : 10px;
  font-family: 'Shadows Into Light', cursive;
  text-shadow: 1px 1px 0px #B1AAB5;
  text-align:center;
  color: #40313B;
  background-color : #6B323A;
  border: 1px solid #6B323A;
}
#navigationPA {
  width: 140px;
  height : 20px;
  line-height:20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#navigationPA li {
  background: #E8E4ED;
  color: #40313B;
  padding: 4px 0 ;
}
#navigationPA li a {
  display: block;
  background: #E8E4ED;
  color: #40313B;
  font-family: calibri;
  text-align: center;
  text-decoration: none!important;

}
#navigationPA li a:hover, #navigationPA li a:focus, #navigationPA li a:active {
  background: #6B323A;
  color: #B1AAB5;
  height : 20px;
  line-height:20px;
  text-decoration: none!important;
  text-transform: uppercase;
  font-weight: bold;
}
.textessimage {
  background-color: #6B323A;
  width: 50px;
  height: 80px;
  overflow: auto;
  font-family: calibri;
  font-size: 10px;
  color: #E8E4ED;
  text-align:center;
}
.imagesrtexte a {
  color: #E8E4ED;
}
.imagesrtexte img {
  margin-top: -80px;
  transition: transform 5s;
  -moz-transition: -moz-transform 5s;
  -o-transition: -o-transform 5s;
  -webkit-transition: -webkit-transform 5s;
}
.imagesrtexte:hover img {
  display: none;
}
 
::-webkit-scrollbar {
  height: 3px;
  width: 10px;
  background-color: #D8D8D8; /* couleur de fond */
}
html > ::-webkit-scrollbar {
  width: 5px; /* largeur de la barre */
}
::-webkit-scrollbar-thumb {
  background: #6B323A; /* couleur de la barre qui se déplace */
}
::-webkit-scrollbar-track-piece {
  background-color: #D8D8D8; /* couleur de fond */
}
</style>
<head>

<title>Nom de Votre Forum</title>
</head>

<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
<body bgcolor="#D8D8D8">
<center><div class="fondtitreforumpa"><span><div class="titreforumpa"> Nom De Votre Forum </div></span></div>
<table>
<tr>
<td rowspan="2"><div class="titrepa">Navigation</div><div class="cadrepa" style="width:150px;">
<br /><center><div style="height:311px; padding: 3px; overflow: auto;">
<ul id="navigationPA">
  <li><a href="http://" title="aller au menu 1">Menu 1</a></li>
  <li><a href="http://" title="aller au menu 2">Menu 2</a></li>
  <li><a href="http://" title="aller au menu 3">Menu 3</a></li>
  <li><a href="http://" title="aller au menu 4">Menu 4</a></li>
  <li><a href="http://" title="aller au menu 5">Menu 5</a></li>
  <li><a href="http://" title="aller au menu 6">Menu 6</a></li>
  <li><a href="http://" title="aller au menu 7">Menu 7</a></li>
  <li><a href="http://" title="aller au menu 8">Menu 8</a></li>
  <li><a href="http://" title="aller au menu 9">Menu 9</a></li>
  <li><a href="http://" title="aller au menu 10">Menu 10</a></li>
</ul></div></center></div>
</td>
<td colspan="2"><div class="titrepa">Contexte</div><div  class="cadrepa" style="width:350px;overflow: auto;">
<br /><center><div style="height:200px; padding: 3px; overflow: auto; text-align:justify;">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
<br /><br /><a href="http://" class="postlink" target="_blank" rel="nofollow"> >> Lire la suite ? </a>
</div></center></div>
</td>
</tr>
<tr>
<td colspan="2"><div class="titrepa">Statistiques</div><div  class="cadrepa" style="width:350px;overflow: auto;">
<br /><center><div style="height:50px; padding: 3px; overflow: auto; text-align:justify;">
Le forum compte <font color="#6B323A"><span class="FORUMCOUNTUSER"></span> Membres</font> qui ont posté <font color="#6B323A"><span class="FORUMCOUNTPOST"></span> messages</font>. Le dernier inscrit est <font color="#6B323A"><span class="FORUMLASTUSER"></span></font>
</div></center></div>
</td>
</tr>
<tr>
<td colspan="3"><div class="titrepa">Nos vacants libres</div><div  class="cadrepa" style="width:524px; overflow: auto;">
<br /><center><div style="height:100px; padding: 3px; overflow: auto; text-align:center;">
<center><table>
<tbody>
<tr>
<td><div class="imagesrtexte"><div class="textessimage"><strong>Prenom Nom</strong><br /><a href="http://">voir fiche</a> </div><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-50x80.jpg" /></div>
</td>
<td><div class="imagesrtexte"><div class="textessimage"><strong>Prenom Nom</strong><br /><a href="http://">voir fiche</a> </div><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-50x80.jpg" /></div>
</td>
<td><div class="imagesrtexte"><div class="textessimage"><strong>Prenom Nom</strong><br /><a href="http://">voir fiche</a> </div><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-50x80.jpg" /></div>
</td>
<td><div class="imagesrtexte"><div class="textessimage"><strong>Prenom Nom</strong><br /><a href="http://">voir fiche</a> </div><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-50x80.jpg" /></div>
</td>
<td><div class="imagesrtexte"><div class="textessimage"><strong>Prenom Nom</strong><br /><a href="http://">voir fiche</a> </div><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-50x80.jpg" /></div>
</td>
<td><div class="imagesrtexte"><div class="textessimage"><strong>Prenom Nom</strong><br /><a href="http://">voir fiche</a> </div><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-50x80.jpg" /></div>
</td>
<td><div class="imagesrtexte"><div class="textessimage"><strong>Prenom Nom</strong><br /><a href="http://">voir fiche</a> </div><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-50x80.jpg" /></div>
</td>
<td><div class="imagesrtexte"><div class="textessimage"><strong>Prenom Nom</strong><br /><a href="http://">voir fiche</a> </div><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-50x80.jpg" /></div>
</td>
</tr>
</tbody>
  </table></center>
</div></center></div>
</td>
</tr>
 <tr>
<td colspan="3"><div class="titrepa">Nous Lier</div><div  class="cadrepa" style="width:524px; overflow: auto;">
<br /><center><div style="height:50px; padding: 3px; overflow: auto; text-align:center;">
<a href="http://blackeden.fr/" class="postlink" target="_blank" rel="nofollow" title="Black Eden"><img border="0" src="http://kiarie.free.fr/eden/images/link/88x31-20.jpg" alt="" /></a> <a href="http://" class="postlink" target="_blank" rel="nofollow" title="ami #2"><img border="0" src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-88x31.jpg" alt="" /></a> <a href="http://" class="postlink" target="_blank" rel="nofollow" title="ami #3"><img border="0" src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-88x31.jpg" alt="" /></a> <a href="http://" class="postlink" target="_blank" rel="nofollow" title="ami #4"><img border="0" src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-88x31.jpg" alt="" /></a>
</div></center></div>
</td>
</tr>
  </table><div style="font-family: calibri; font-size: 12px; color: #40313B;">Fiche Créée par KIARIE de <a href="http://blackeden.fr">BLACK EDEN</a></div></center><br /></body>

Merci d'avance pour votre aide.


Dernière édition par kiarie le Mer 16 Mar 2016 - 23:46, édité 1 fois
kiarie

kiarie
****

Féminin
Messages : 281
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page HTML différente entre Chrome et Firefox

Message par horusbk Mer 16 Mar 2016 - 23:35

Bonsoir,

Lorsque vous créez une page HTML, il y a une certaine structure à respecter pour que votre page soit affichée de façon optimale.

Essayez avec cette structure :
Code:
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <style type="text/css">
 
  // votre css
 
  </style>
  </head>
  <body>
 
  // votre code html
 
  </body>
</html>

J'ai mis votre codage dans cette nouvelle structure, est-ce que le résultat est différent sous Firefox ?
Code:
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <style type="text/css">
<style>
body, tr, td {
 cursor: crosshair;
 font-family: calibri;
 font-size: 12pt;
 font-color: #40313B;}
 
a:link {color: #6B323A;}
a:visited {color: #6B323A;}
a:hover {color: #40313B;}
a:active {color: #40313B;}

.fondtitreforumpa{
  margin:30px;
  padding:-20px;
  text-align:center;
  position:relative;
  line-height:10px;
  box-shadow:0 15px 0 0 #6B323A inset;
  width:500px;
}
.fondtitreforumpa span{
  background-color:#6B323A;
  padding:0 0px;
}
.titreforumpa {
  font-size: 60px;
  font-family: 'Shadows Into Light', cursive;
  text-shadow: 2px 2px 0px #B1AAB5;
  color: #40313B;
}
.cadrepa {
  background-color: #E8E4ED;
  box-shadow: 0px 0px 5px #E8E4ED;
  font-family: calibri;
  font-size: 12px;
  color: #40313B;
  display: block;
  padding-left: 10px;
  padding-right: 10px;
  text-align:justify;
  line-height: 15px;
  border-bottom: 2px solid #40313B;
}
.titrepa {
  font-size: 20px;
  letter-spacing : 10px;
  font-family: 'Shadows Into Light', cursive;
  text-shadow: 1px 1px 0px #B1AAB5;
  text-align:center;
  color: #40313B;
  background-color : #6B323A;
  border: 1px solid #6B323A;
}
#navigationPA {
  width: 140px;
  height : 20px;
  line-height:20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#navigationPA li {
  background: #E8E4ED;
  color: #40313B;
  padding: 4px 0 ;
}
#navigationPA li a {
  display: block;
  background: #E8E4ED;
  color: #40313B;
  font-family: calibri;
  text-align: center;
  text-decoration: none!important;

}
#navigationPA li a:hover, #navigationPA li a:focus, #navigationPA li a:active {
  background: #6B323A;
  color: #B1AAB5;
  height : 20px;
  line-height:20px;
  text-decoration: none!important;
  text-transform: uppercase;
  font-weight: bold;
}
.textessimage {
  background-color: #6B323A;
  width: 50px;
  height: 80px;
  overflow: auto;
  font-family: calibri;
  font-size: 10px;
  color: #E8E4ED;
  text-align:center;
}
.imagesrtexte a {
  color: #E8E4ED;
}
.imagesrtexte img {
  margin-top: -80px;
  transition: transform 5s;
  -moz-transition: -moz-transform 5s;
  -o-transition: -o-transform 5s;
  -webkit-transition: -webkit-transform 5s;
}
.imagesrtexte:hover img {
  display: none;
}
 
::-webkit-scrollbar {
  height: 3px;
  width: 10px;
  background-color: #D8D8D8; /* couleur de fond */
}
html > ::-webkit-scrollbar {
  width: 5px; /* largeur de la barre */
}
::-webkit-scrollbar-thumb {
  background: #6B323A; /* couleur de la barre qui se déplace */
}
::-webkit-scrollbar-track-piece {
  background-color: #D8D8D8; /* couleur de fond */
}
</style>

<title>Nom de Votre Forum</title>
</head>

<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
<body bgcolor="#D8D8D8">
<center><div class="fondtitreforumpa"><span><div class="titreforumpa"> Nom De Votre Forum </div></span></div>
<table>
<tr>
<td rowspan="2"><div class="titrepa">Navigation</div><div class="cadrepa" style="width:150px;">
<br /><center><div style="height:311px; padding: 3px; overflow: auto;">
<ul id="navigationPA">
  <li><a href="http://" title="aller au menu 1">Menu 1</a></li>
  <li><a href="http://" title="aller au menu 2">Menu 2</a></li>
  <li><a href="http://" title="aller au menu 3">Menu 3</a></li>
  <li><a href="http://" title="aller au menu 4">Menu 4</a></li>
  <li><a href="http://" title="aller au menu 5">Menu 5</a></li>
  <li><a href="http://" title="aller au menu 6">Menu 6</a></li>
  <li><a href="http://" title="aller au menu 7">Menu 7</a></li>
  <li><a href="http://" title="aller au menu 8">Menu 8</a></li>
  <li><a href="http://" title="aller au menu 9">Menu 9</a></li>
  <li><a href="http://" title="aller au menu 10">Menu 10</a></li>
</ul></div></center></div>
</td>
<td colspan="2"><div class="titrepa">Contexte</div><div  class="cadrepa" style="width:350px;overflow: auto;">
<br /><center><div style="height:200px; padding: 3px; overflow: auto; text-align:justify;">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
<br /><br /><a href="http://" class="postlink" target="_blank" rel="nofollow"> >> Lire la suite ? </a>
</div></center></div>
</td>
</tr>
<tr>
<td colspan="2"><div class="titrepa">Statistiques</div><div  class="cadrepa" style="width:350px;overflow: auto;">
<br /><center><div style="height:50px; padding: 3px; overflow: auto; text-align:justify;">
Le forum compte <font color="#6B323A"><span class="FORUMCOUNTUSER"></span> Membres</font> qui ont posté <font color="#6B323A"><span class="FORUMCOUNTPOST"></span> messages</font>. Le dernier inscrit est <font color="#6B323A"><span class="FORUMLASTUSER"></span></font>
</div></center></div>
</td>
</tr>
<tr>
<td colspan="3"><div class="titrepa">Nos vacants libres</div><div  class="cadrepa" style="width:524px; overflow: auto;">
<br /><center><div style="height:100px; padding: 3px; overflow: auto; text-align:center;">
<center><table>
<tbody>
<tr>
<td><div class="imagesrtexte"><div class="textessimage"><strong>Prenom Nom</strong><br /><a href="http://">voir fiche</a> </div><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-50x80.jpg" /></div>
</td>
<td><div class="imagesrtexte"><div class="textessimage"><strong>Prenom Nom</strong><br /><a href="http://">voir fiche</a> </div><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-50x80.jpg" /></div>
</td>
<td><div class="imagesrtexte"><div class="textessimage"><strong>Prenom Nom</strong><br /><a href="http://">voir fiche</a> </div><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-50x80.jpg" /></div>
</td>
<td><div class="imagesrtexte"><div class="textessimage"><strong>Prenom Nom</strong><br /><a href="http://">voir fiche</a> </div><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-50x80.jpg" /></div>
</td>
<td><div class="imagesrtexte"><div class="textessimage"><strong>Prenom Nom</strong><br /><a href="http://">voir fiche</a> </div><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-50x80.jpg" /></div>
</td>
<td><div class="imagesrtexte"><div class="textessimage"><strong>Prenom Nom</strong><br /><a href="http://">voir fiche</a> </div><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-50x80.jpg" /></div>
</td>
<td><div class="imagesrtexte"><div class="textessimage"><strong>Prenom Nom</strong><br /><a href="http://">voir fiche</a> </div><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-50x80.jpg" /></div>
</td>
<td><div class="imagesrtexte"><div class="textessimage"><strong>Prenom Nom</strong><br /><a href="http://">voir fiche</a> </div><img src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-50x80.jpg" /></div>
</td>
</tr>
</tbody>
  </table></center>
</div></center></div>
</td>
</tr>
 <tr>
<td colspan="3"><div class="titrepa">Nous Lier</div><div  class="cadrepa" style="width:524px; overflow: auto;">
<br /><center><div style="height:50px; padding: 3px; overflow: auto; text-align:center;">
<a href="http://blackeden.fr/" class="postlink" target="_blank" rel="nofollow" title="Black Eden"><img border="0" src="http://kiarie.free.fr/eden/images/link/88x31-20.jpg" alt="" /></a> <a href="http://" class="postlink" target="_blank" rel="nofollow" title="ami #2"><img border="0" src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-88x31.jpg" alt="" /></a> <a href="http://" class="postlink" target="_blank" rel="nofollow" title="ami #3"><img border="0" src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-88x31.jpg" alt="" /></a> <a href="http://" class="postlink" target="_blank" rel="nofollow" title="ami #4"><img border="0" src="http://kiarie.free.fr/eden/portfolio/codage/pa/pa2-88x31.jpg" alt="" /></a>
</div></center></div>
</td>
</tr>
  </table><div style="font-family: calibri; font-size: 12px; color: #40313B;">Fiche Créée par KIARIE de <a href="http://blackeden.fr">BLACK EDEN</a></div></center><br /></body></html>

Cordialement,
horusbk
horusbk

horusbk
*****

Masculin
Messages : 625
Inscrit(e) le : 14/02/2015

http://horus.forumactif.com/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page HTML différente entre Chrome et Firefox

Message par kiarie Mer 16 Mar 2016 - 23:45

Bonsoir !

Je viens de modifier mon code en suivant vos indications et en effet ça marche très bien Smile

Merci beaucoup pour votre aide, je ferais plus attention la prochaine fois.
kiarie

kiarie
****

Féminin
Messages : 281
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum