Code HTML qui ne s'affiche pas correctement dans les messages

[Alleny]

Bonjour à tous

Je fais appel à vous car j'ai un petit problème de codage sur un forum. En effet, je suis en train de travailler une fiche de pub/partenariat en HTML et CSS afin de rendre la présentation agréable et qui donne envie d'aller jeter un oeil au forum.

J'ai d’abord travaillé en local, avec Notepad++ comme éditeur de texte, Google Chrome comme navigateur. Après beaucoup de problèmes heureusement vite résolus, je me précipite sur ma page Internet afin de la mettre en ligne. Je copie-colle le code suivant (sans les retours à la ligne pour qu'il n'en apparaissent d'inutiles sur le message) :

Code:

<table style="border: 1px solid black; margin: auto; background-color: #DBC283; text-align: justify; width:50%; font-family: Georgia !important" cellspacing="30">
   <tr>
      <td colspan="2">
         <a href="http://lycaonsurvival.naturalforum.net/"><img src="http://img11.hostingpics.net/pics/429287BannierePub.jpg" /></a>
         <div style="margin-top: -80px; text-align: center; font-size: 30px; color: #9B6D5E; text-shadow: white 1px 1px, white -1px 1px, white -1px -1px, white 1px -1px; "><h1>Lycaon Survival</h1></div>
         <div style="margin-top: -55px; text-align: center; font-size: 17px; color: #9B6D5E;">Les lycaons réservent bien des surprises...</div>
         <div style="text-align: center; letter-spacing: 3px; color: #4D3924;">http://lycaonsurvival.naturalforum.net/</div>
      </td>
   </tr>
   
   <tr>
      <td colspan="2" style="text-align: center; background-color: #825A2F;">
      <a href="http://lycaonsurvival.naturalforum.net/t1-reglements" style="text-decoration: none; font-family: Georgia, serif; color: #C5AE78;">Règlements</a> ♦
      <a href="http://lycaonsurvival.naturalforum.net/t13-l-histoire" style="text-decoration: none; font-family: Georgia, serif; color: #C5AE78;">L'histoire</a> ♦
      <a href="http://lycaonsurvival.naturalforum.net/f22-adoptions" style="text-decoration: none; font-family: Georgia, serif; color: #C5AE78;">Adoptions</a> ♦
      <a href="http://lycaonsurvival.naturalforum.net/f7-pubs-et-partenariats" style="text-decoration: none; font-family: Georgia, serif; color: #C5AE78;">Pubs et partenariats</a></td>
   </tr>
   <tr>
      <td colspan="2">
         <fieldset style="background-color: white; font-family: Georgia; color: #5E4647; font-size: 12.5px; border: 2px #E4DEE1 solid; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;"><legend><span style="font-family: Century Gothic; font-size: 18px; color: white; letter-spacing: 3px; background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg); width: auto; padding-right: 5px; padding-left: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">Contexte</span></legend>
         <p>CONTEXTE</p>
         </fieldset>
      </td>
   </tr>
   <tr>
      <td colspan="2">
         <fieldset style="background-color: white; font-family: Georgia; color: #5E4647; font-size: 12.5px; border: 2px #E4DEE1 solid; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;"><legend><span style="font-family: Century Gothic; font-size: 18px; color: white; letter-spacing: 3px; background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg); width: auto; padding-right: 5px; padding-left: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">News</span></legend>
         <p>
         - Le forum a été créé le 5 février 2012, sous la direction de Moka, la fondatrice toute puissante XD<br />
         - Heaven a rejoint nos rangs, et dans un élan de générosité, a mis en place un nouveau thème à l'occasion de la "rénovation du forum" X)<br />
         - Une nouvelle PA a vu le jour, avec plus d'info sur la page d'accueil, et la CB est à présent accessible sur chaque page ^^<br />
         - Un nouveau contexte a été écrit par Moka en ces journées d'été
         </p>
         </fieldset>
      </td>
   </tr>
   <tr>
      <td>
         <fieldset style="background-color: white; font-family: Georgia; color: #5E4647; font-size: 12.5px; border: 2px #E4DEE1 solid; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;"><legend><span style="font-family: Century Gothic; font-size: 18px; color: white; letter-spacing: 3px; background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg); width: auto; padding-right: 5px; padding-left: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">Stats</span></legend>
         <p>
         ○ Nos membres ont posté un total de 18 messages<br />
         ○ Nous avons 6 membres enregistrés<br />
         ○ L'utilisateur enregistré le plus récent est Heaven
         </p>
         </fieldset>
      </td>
      <td height="100%">
         <fieldset style="text-align: left; background-color: white; font-family: Georgia; color: #5E4647; font-size: 12.5px; border: 2px #E4DEE1 solid; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;"><legend><span style="font-family: Century Gothic; font-size: 18px; color: white; letter-spacing: 3px; background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg); width: auto; padding-right: 5px; padding-left: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">Staff</span></legend>
         <p style="text-align: center;">Moka • Fonda<br />
         <img src="http://i46.servimg.com/u/f46/15/46/94/91/pa_bmp11.jpg" /></p>
         <p style="text-align: center;">Heaven • Graph'<br />
         <img src="http://i44.servimg.com/u/f44/16/24/03/74/zai1010.jpg" /></p>
         </p>
         </fieldset>
      </td>
   </tr>
   <tr>
      <td colspan="2">
         <fieldset style="background-color: white; font-family: Georgia; color: #5E4647; font-size: 12.5px; border: 2px #E4DEE1 solid; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;"><legend><span style="font-family: Century Gothic; font-size: 18px; color: white; letter-spacing: 3px; background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg); width: auto; padding-right: 5px; padding-left: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">Nous lier</span></legend>
            <div style="text-align: center;">
               <p>
                  88*31<br/>
                  <img src="http://img11.hostingpics.net/pics/452009BoutonTaille1.jpg" /><br/>
                  <div style="text-align: center;">♣</div><br />
                  90*30<br />
                  <img src="http://img11.hostingpics.net/pics/406755BoutonTaille2.jpg" /><br />
                  <div style="text-align: center;">♣</div><br />
                  250*60<br />
                  <img src="http://img11.hostingpics.net/pics/735221BoutonTaille3.jpg" /><br />
                  <div style="text-align: center;">♣</div><br />
                  450*60<br />
                  <img src="http://img11.hostingpics.net/pics/630941BoutonTaille4.jpg" /><br />
                  <div style="text-align: center;">♣</div><br />
                  468*60<br />
                  <img src="http://img11.hostingpics.net/pics/253880BoutonTaille5.jpg" />
               </p>
            </div>
         </fieldset>
      </td>
   </tr>
   <tr>
      <td colspan="2" style="text-align: center; font-family: Georgia; color: #5E4647; font-size: 12.5px;">
      <p><i>Codage par Heaven. Fiche de partenariat/pub réservée au forum RPG Lycaon Survival.</i></p>
      </td>
   </tr>
</table>

Toute excitée, je m'assure du rendu du code en prévisualisant mon message. Mais là, horreur Une partie du code n'est pas du tout prise en compte, comme le changement de police de caractère, ou le positionnement du titre du forum.

Voici ce que ça me donne en local :

Et sur le forum :

Voilà, je ne sais pas exactement à quoi c'est du, j'ai cherché sur les forums mais je n'ai rien trouvé :S
Merci d'avance pour votre aide ^^

PS : je suis l'admin du forum en question, qui est sous phpBB2, je ne sais pas si ça aide ici mais je préfère le dire XD

[XxSven]

Il y a des codes comme l'ombrage qui demandent un code spécifique pour chaque navigateur il me semble.

exemple :

Code:

  -moz-box-shadow:  0px 0px 10px #3D3D37;
  box-shadow:  0px 0px 10px #3D3D37;
-webkit-box-shadow: 0px 0px 10px #3D3D37;

-moz- pour firefox
-webkit- pour google chrome il me semble
il y a aussi -ms- pour internet explorer mais ça n'existe pas pour l'ombrage je crois.

Essaye de trouver les codes correspondant à chaque navigateur (oui c'est la galère...)

[Alleny]

Merci de ta réponse

Euh, je ne crois pas que ce soit un problème de la compatibilité entre les différents navigateurs, étant donné que je n'en change pas quand je passe en ligne après avoir travaillé en local ^^'

[Alleny]

UP s'il vous plait

[Invité]

Bonjour,

En retirant le <h1> ...</h1> et en modifiant les margin-top, ça semble fonctionner correctement. Pour le h1, cela s'explique car il y a une class attribuée à cette balise dans le CSS de base de votre forum ... pour les marges, par contre, mystère .

Code:

<table style="border: 1px solid black; margin: auto; background-color: #DBC283; text-align: justify; width:50%; font-family: Georgia !important" cellspacing="30"> <tr>      <td colspan="2">        <a href="http://lycaonsurvival.naturalforum.net/"><img src="http://img11.hostingpics.net/pics/429287BannierePub.jpg" /></a>        <div style="margin-top: -10px; text-align: center; font-size: 30px; color: #9B6D5E; text-shadow: white 1px 1px, white -1px 1px, white -1px -1px, white 1px -1px; ">Lycaon Survival</div>        <div style="margin-top: -5px; text-align: center; font-size: 17px; color: #9B6D5E;">Les lycaons réservent bien des surprises...</div>        <div style="text-align: center; letter-spacing: 3px; color: #4D3924;">http://lycaonsurvival.naturalforum.net/</div>      </td>
  </tr>  <tr>      <td colspan="2"><div style="text-align: center; background: #825A2F;">      <a href="http://lycaonsurvival.naturalforum.net/t1-reglements" style="text-decoration: none; font-family: Georgia, serif; color: #C5AE78;">Règlements</a> ♦      <a href="http://lycaonsurvival.naturalforum.net/t13-l-histoire" style="text-decoration: none; font-family: Georgia, serif; color: #C5AE78;">L'histoire</a> ♦      <a href="http://lycaonsurvival.naturalforum.net/f22-adoptions" style="text-decoration: none; font-family: Georgia, serif; color: #C5AE78;">Adoptions</a> ♦      <a href="http://lycaonsurvival.naturalforum.net/f7-pubs-et-partenariats" style="text-decoration: none; font-family: Georgia, serif; color: #C5AE78;">Pubs et partenariats</a></div></td>  </tr> <tr>      <td colspan="2">    <fieldset style="background-color: white; font-family: Georgia; color: #5E4647; font-size: 12.5px; border: 2px #E4DEE1 solid; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;"><legend><span style="font-family: Century Gothic; font-size: 18px; color: white; letter-spacing: 3px; background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg); width: auto; padding-right: 5px; padding-left: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">Contexte</span></legend>        <p>CONTEXTE</p>        </fieldset>      </td>  </tr>  <tr>      <td colspan="2">        <fieldset style="background-color: white; font-family: Georgia; color: #5E4647; font-size: 12.5px; border: 2px #E4DEE1 solid; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;"><legend><span style="font-family: Century Gothic; font-size: 18px; color: white; letter-spacing: 3px; background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg); width: auto; padding-right: 5px; padding-left: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">News</span></legend>        <p>
        - Le forum a été créé le 5 février 2012, sous la direction de Moka, la fondatrice toute puissante XD<br />        - Heaven a rejoint nos rangs, et dans un élan de générosité, a mis en place un nouveau thème à l'occasion de la "rénovation du forum" X)<br />        - Une nouvelle PA a vu le jour, avec plus d'info sur la page d'accueil, et la CB est à présent accessible sur chaque page ^^<br />        - Un nouveau contexte a été écrit par Moka en ces journées d'été        </p>        </fieldset>      </td>  </tr>  <tr>      <td>        <fieldset style="background-color: white; font-family: Georgia; color: #5E4647; font-size: 12.5px; border: 2px #E4DEE1 solid; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;"><legend><span style="font-family: Century Gothic; font-size: 18px; color: white; letter-spacing: 3px; background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg); width: auto; padding-right: 5px; padding-left: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">Stats</span></legend>        <p>        ○ Nos membres ont posté un total de 18 messages<br />        ○ Nous avons 6 membres enregistrés<br />        ○ L'utilisateur enregistré le plus récent est Heaven        </p>        </fieldset>      </td>      <td height="100%">        <fieldset style="text-align: left; background-color: white; font-family: Georgia; color: #5E4647; font-size: 12.5px; border: 2px #E4DEE1 solid; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;"><legend><span style="font-family: Century Gothic; font-size: 18px; color: white; letter-spacing: 3px; background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg); width: auto; padding-right: 5px; padding-left: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">Staff</span></legend>        <p style="text-align: center;">Moka • Fonda<br />        <img src="http://i46.servimg.com/u/f46/15/46/94/91/pa_bmp11.jpg" /></p>        <p style="text-align: center;">Heaven • Graph'<br />        <img src="http://i44.servimg.com/u/f44/16/24/03/74/zai1010.jpg" /></p>        </p>        </fieldset>      </td>  </tr>  <tr>      <td colspan="2">        <fieldset style="background-color: white; font-family: Georgia; color: #5E4647; font-size: 12.5px; border: 2px #E4DEE1 solid; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;"><legend><span style="font-family: Century Gothic; font-size: 18px; color: white; letter-spacing: 3px; background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg); width: auto; padding-right: 5px; padding-left: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">Nous lier</span></legend>            <div style="text-align: center;">              <p>                  88*31<br/>
                  <img src="http://img11.hostingpics.net/pics/452009BoutonTaille1.jpg" /><br/>                  <div style="text-align: center;">♣</div><br />                  90*30<br />                  <img src="http://img11.hostingpics.net/pics/406755BoutonTaille2.jpg" /><br />                  <div style="text-align: center;">♣</div><br />                  250*60<br />                  <img src="http://img11.hostingpics.net/pics/735221BoutonTaille3.jpg" /><br />                  <div style="text-align: center;">♣</div><br />                  450*60<br />                  <img src="http://img11.hostingpics.net/pics/630941BoutonTaille4.jpg" /><br />                  <div style="text-align: center;">♣</div><br />                  468*60<br />                  <img src="http://img11.hostingpics.net/pics/253880BoutonTaille5.jpg" />              </p>            </div>        </fieldset>      </td>  </tr>  <tr>      <td colspan="2" style="text-align: center; font-family: Georgia; color: #5E4647; font-size: 12.5px;">      <p><i>Codage par Heaven. Fiche de partenariat/pub réservée au forum RPG Lycaon Survival.</i></p>      </td>  </tr></table>

Spoiler:

Bien sincèrement.

[HPie]

Bonjour,

J'ai repris votre code initial en supprimant tous les CR/LF

Code:

<table style="border: 1px solid black; margin: auto; background-color: #DBC283; text-align: justify; width:50%; font-family: Georgia !important" cellspacing="30"><tr><td colspan="2"><a href="http://lycaonsurvival.naturalforum.net/"><img src="http://img11.hostingpics.net/pics/429287BannierePub.jpg" /></a><div style="margin-top: -80px; text-align: center; font-size: 30px; color: #9B6D5E; text-shadow: white 1px 1px, white -1px 1px, white -1px -1px, white 1px -1px; "><h1>Lycaon Survival</h1></div><div style="margin-top: -55px; text-align: center; font-size: 17px; color: #9B6D5E;">Les lycaons réservent bien des surprises...</div><div style="text-align: center; letter-spacing: 3px; color: #4D3924;">http://lycaonsurvival.naturalforum.net/</div></td></tr><tr><td colspan="2" style="text-align: center; background-color: #825A2F;"><a href="http://lycaonsurvival.naturalforum.net/t1-reglements" style="text-decoration: none; font-family: Georgia, serif; color: #C5AE78;">Règlements</a> ♦<a href="http://lycaonsurvival.naturalforum.net/t13-l-histoire" style="text-decoration: none; font-family: Georgia, serif; color: #C5AE78;">L'histoire</a> ♦<a href="http://lycaonsurvival.naturalforum.net/f22-adoptions" style="text-decoration: none; font-family: Georgia, serif; color: #C5AE78;">Adoptions</a> ♦<a href="http://lycaonsurvival.naturalforum.net/f7-pubs-et-partenariats" style="text-decoration: none; font-family: Georgia, serif; color: #C5AE78;">Pubs et partenariats</a></td></tr><tr><td colspan="2"><fieldset style="background-color: white; font-family: Georgia; color: #5E4647; font-size: 12.5px; border: 2px #E4DEE1 solid; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;"><legend><span style="font-family: Century Gothic; font-size: 18px; color: white; letter-spacing: 3px; background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg); width: auto; padding-right: 5px; padding-left: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">Contexte</span></legend><p>CONTEXTE</p></fieldset></td></tr><tr><td colspan="2"><fieldset style="background-color: white; font-family: Georgia; color: #5E4647; font-size: 12.5px; border: 2px #E4DEE1 solid; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;"><legend><span style="font-family: Century Gothic; font-size: 18px; color: white; letter-spacing: 3px; background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg); width: auto; padding-right: 5px; padding-left: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">News</span></legend><p>- Le forum a été créé le 5 février 2012, sous la direction de Moka, la fondatrice toute puissante XD<br />- Heaven a rejoint nos rangs, et dans un élan de générosité, a mis en place un nouveau thème à l'occasion de la "rénovation du forum" X)<br />- Une nouvelle PA a vu le jour, avec plus d'info sur la page d'accueil, et la CB est à présent accessible sur chaque page ^^<br />- Un nouveau contexte a été écrit par Moka en ces journées d'été</p></fieldset></td></tr><tr><td><fieldset style="background-color: white; font-family: Georgia; color: #5E4647; font-size: 12.5px; border: 2px #E4DEE1 solid; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;"><legend><span style="font-family: Century Gothic; font-size: 18px; color: white; letter-spacing: 3px; background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg); width: auto; padding-right: 5px; padding-left: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">Stats</span></legend><p>○ Nos membres ont posté un total de 18 messages<br />○ Nous avons 6 membres enregistrés<br />○ L'utilisateur enregistré le plus récent est Heaven</p></fieldset></td><td height="100%"><fieldset style="text-align: left; background-color: white; font-family: Georgia; color: #5E4647; font-size: 12.5px; border: 2px #E4DEE1 solid; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;"><legend><span style="font-family: Century Gothic; font-size: 18px; color: white; letter-spacing: 3px; background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg); width: auto; padding-right: 5px; padding-left: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">Staff</span></legend><p style="text-align: center;">Moka • Fonda<br /><img src="http://i46.servimg.com/u/f46/15/46/94/91/pa_bmp11.jpg" /></p><p style="text-align: center;">Heaven • Graph'<br /><img src="http://i44.servimg.com/u/f44/16/24/03/74/zai1010.jpg" /></p></p></fieldset></td></tr><tr><td colspan="2"><fieldset style="background-color: white; font-family: Georgia; color: #5E4647; font-size: 12.5px; border: 2px #E4DEE1 solid; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;"><legend><span style="font-family: Century Gothic; font-size: 18px; color: white; letter-spacing: 3px; background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg); width: auto; padding-right: 5px; padding-left: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;">Nous lier</span></legend><div style="text-align: center;"><p>88*31<br/><img src="http://img11.hostingpics.net/pics/452009BoutonTaille1.jpg" /><br/><div style="text-align: center;">♣</div><br />90*30<br /><img src="http://img11.hostingpics.net/pics/406755BoutonTaille2.jpg" /><br /><div style="text-align: center;">♣</div><br />250*60<br /><img src="http://img11.hostingpics.net/pics/735221BoutonTaille3.jpg" /><br /><div style="text-align: center;">♣</div><br />450*60<br /><img src="http://img11.hostingpics.net/pics/630941BoutonTaille4.jpg" /><br /><div style="text-align: center;">♣</div><br />468*60<br /><img src="http://img11.hostingpics.net/pics/253880BoutonTaille5.jpg" /></p></div></fieldset></td></tr><tr><td colspan="2" style="text-align: center; font-family: Georgia; color: #5E4647; font-size: 12.5px;"><p><i>Codage par Heaven. Fiche de partenariat/pub réservée au forum RPG Lycaon Survival.</i></p></td></tr></table>

[Alleny]

Merci beaucoup de vos réponses

@Azami : Ta réponse m'a beaucoup aidé. J'avais déjà essayé d'enlever les margin-top mais jamais de les modifier O.O Pour les marges, ce n'est pas une erreur, un mystère, ça marche, c'est juste moi qui ai mal coupé mes captures d'écran Au final, j'ai réussi à modifier la police comme je voulais, c'est à dire tout en Georgia. Il fallait appliquer un font-family à chaque fois que je veux l'utiliser au lieu de le mettre sur l'ensemble :S

@HPie : Qu'entend-tu par "les CR/LF" ?

En tout cas, ce sujet est ^^ Merci ♥