5568 sujets

Sémantique web et HTML

Différence d'affichage selon le Doctype.

Bonjour à tous,
J'ai un petit soucis avec mon site web. Je vous expose le probleme:

Ayant pris un peu le temps de rendre ma page valide XHTML 1.0 Strict,
je me suis retrouvé avec un problème d'affichage assez étrange:

http://sixoo.net/index2.php

Sur cette page j'ai donc mis un doctype du type:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Quand je passe en transitionnal, plus de problème...

Bref, ça doit être un problème assez récurent, mais j'aimerai bien comprendre pourquoi l'affichage bug-t-il sous FF et Opera quand je suis en strict Smiley decu

J'ai essayé de me renseigner sur les différences d'affichage possibles entre ces deux Doctype mais je n'ai pas trouvé.
Je ne pense pas non plus que ce soit un problème d'indentation.

Merci d'avance, et merci aux forums Alsacréations qui m'ont tant appris




Smiley biggrin
Modifié par sixoo (30 Dec 2006 - 16:25)
Mouais... Sur un forum dédié aux standards, ce genre de code ne vas pas suciter beaucoup d'intérêt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 1 September 2005), see  www.w3.org"  />
    <title>sixoo CV développeur web, intégrateur, webdesigner</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="description" content="site de sixoo développeur web" />
    <meta name="robots" content="all" />
    <meta name="keywords" content="sixoo, developpeur,cv développeur, webdesigner, developper, stage, designer, php, c, xml, html, nintendods, creative zen, zen vision m, animal crossing, epitech, metagames, toto, tingle, ask, php, asp, 1000mercis, ps2, swap magic, blog, sudoku, gratuit, lecteur rss, psp" />
    <meta name="distribution" content="global" />
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
    <link rel="Accueil" href="/" />
    <link rel="Portfolio" href="/portfolio.html" />
    <link rel="About me" href="/about-me.html" />
    <link rel="Bonus" href="/bonus.html" />
  </head>
  <body>
<div id="page">  
    <table cellpadding="0" cellspacing="0" style="width:800px; height:505px;">
      <tr>
        <td rowspan="6"><img src="images/ombre_gauche.jpg" width="28" height="505" alt="template" /></td>
        <td colspan="4"><img src="images/ombre_haut.jpg" width="744" height="14" alt="template" /></td>
        <td rowspan="6"><img src="images/ombre_droite.jpg" width="28" height="505" alt="temlpate" /></td>
      </tr>
      <tr><td colspan="4"><img src="images/top.jpg" width="744" height="68" alt="template" /></td></tr>
      <tr>
        <td style="background-image: url(images/gauche_edito.jpg); width:16px; height:309px;"></td>
        <td>
          <table cellpadding="0" cellspacing="0" style="width:207px; height:309px; border:none;">
            <tr><td class="verdana11gris" style="background-image: url(images/bg_title_edito.jpg); width:207px; height:17px;"></td></tr>
            <tr>
              <td class="verdana11gris" style="background-image: url(images/bg_edito.jpg); width:207px; height:130px;">
              <b>Bienvenue sur  www.sixoo.net</b>.<br  />
                <br />Vous trouverez ici des choses plus ou moins intéressentes sur moi même:
				<br />Ma formation, mes réalisations sous forme de portfolio, et pleins de petits bonus sympatoches en perspective [smile]</td></tr>
            <tr><td><img src="images/index_09.jpg" width="207" height="14" alt="template" /></td></tr>
            <tr><td style="background-image: url(images/bg_onglet_home.jpg); width:207px; height:17px;" class="verdana11gris"><img src="images/px.gif" width="15" height="1" alt="template" /><a href="/index.html" style="color:#606060; text-decoration:none;" title="Accueil du site">HOME</a></td></tr>
            <tr><td style="background-image: url(images/bg_onglet_portfolio.jpg); width:207px; height:17px" class="verdana11gris"><img src="images/px.gif" width="15" height="1" alt="template" /><a href="/portfolio.html" style="color:#606060; text-decoration:none;" title="Mes réalisations">PORTFOLIO</a></td></tr>
            <tr><td style="background-image: url(images/bg_onglet_blog.jpg); width:207px; height:16px;" class="verdana11gris"><img src="images/px.gif" width="15" height="1" alt="template" /><a href="http://blog.sixoo.net" style="color:#606060; text-decoration:none;" title="Mon blog">BLOG</a></td></tr>
            <tr><td style="background-image: url(images/bg_onglet_about.jpg); width:207px; height:17px;" class="verdana11gris"><img src="images/px.gif" width="15" height="1" alt="template" /><a href="/about-me.html" style="color:#606060; text-decoration:none;" title="A propos de moi">ABOUT ME</a></td></tr>
            <tr><td style="background-image: url(images/bg_onglet_about-18.jpg); width:207px; height:18px;" class="verdana11gris"><img src="images/px.gif" width="15" height="1" alt="template" /><a href="/bonus.html" style="color:#606060; text-decoration:none;" title="Les bonus">BONUS</a></td></tr>
            <tr><td><img src="images/h_rechercher.jpg" width="207" height="27" alt="rechercher" /></td></tr>
            <tr><td style="background-image: url(images/bg_recherche.jpg); width:207px; height:19px; align:center;" class="verdana11gris"><!--<input type="text" value="Rechercher..." class="verdana11gris" style="width:120px; height:15px; border:none;" />--></td></tr>
            <tr><td><img src="images/b_recherche.jpg" width="207" height="17" alt="template" /></td></tr>
          </table>
        </td>
        <td>
          <table border="0" cellpadding="0" cellspacing="0" style="width:457px; height:309px; border:none;">
            <tr>
              <td style="background-image: url(images/bg_title_news.jpg); width:350px; height:17px;" class="verdana10bleu"><img src="images/px.gif" width="16" height="1" alt="template" /><b></b></td>
              <td style="background-image: url(images/index_19.jpg); width:107px; height:17px;"><img src="/images/px.gif" width="22" height="1" alt="template" /><img src="/images/px.gif" width="22" height="10" alt="template" /></td>
            </tr>
            <tr>
              <td colspan="2" style="background-image: url(images/bg_news.jpg); width:457px; height:292px;" class="verdana11gris">
                <table style="width:430px;">
                  <tr>
                    <td class="verdana11gris">
                      Rendez vous sur le blog pour le moment  [langue]                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
        <td style="background-image: url(images/d_txt.jpg); width:64px; height:309px;"></td>
      </tr>
      <tr>
        <td colspan="4">
          <table cellpadding="0" cellspacing="0" style=
          "width:744px; height:33px; border:none;">
            <tr>
              <td colspan="4">
                <table cellpadding="0" cellspacing="0" style=
                "width:573px; height:33px; border:none;">
                  <tr>
                    <td><img src="images/g_precedent.jpg" width="223" height="33" alt="template" /><br /></td>
                    <td>
                      <img src="images/precedent_.jpg" width="125" height="33" alt="template" style="border:none;" /><br />
                                          </td>
                    <td><img src="images/prec_suivant.jpg" width="225" height="33" alt="template" /></td>
                  </tr>
                </table>
              </td>
              <td>
                <img src="images/suivant_.jpg" width="107" height="33" alt="page suivante" style="border:none;" /><br />
                				</td>
              <td><img src="images/d_suivant.jpg" width="64" height="33" alt="template" /></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr><td colspan="4"><img src="images/foot.jpg" width="744" height="61" alt="template" /></td></tr>
      <tr><td colspan="4"><img src="images/ombre_bas.jpg" width="744" height="20" alt="template" /></td></tr>
    </table>
</div>
    <p>
      <a href="http://validator.w3.org/check?uri=referer"><img src=
      "http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict"
      height="31" width="88" /></a>
    </p>
    <!--<div class="verdana11gris">Design &amp; code par <a href="#" onclick="displayStaticMessage('<center><font class=\'verdana11gris\'><br /><br /><img src=\'/images/credit.jpg\'><br /></font><a href=\'#\' onclick=\'closeMessage();return false\' class=\'verdana11bleu\'>Fermer</a></center>',false);return false" class="verdana11bleu">sixoo</a></div><br /><br ><A HREF="http://www.mypagerank.net/" target="_blank">-->
  </body>
</html>


Le fait qu'il passe la validation ne veut pas dire grand chose...
ma page est vide certes...
mais je ne comprends pas ta réponse/réaction.

Si ça ne plait pas tant pis.
Je voulais juste une petite indication quant aux differences possibles entre ces deux doctypes...

Je chercherai sur google du coup.Ou du moins, j'attendrai une réponse plus "précise"...
Modifié par sixoo (30 Dec 2006 - 17:35)
Merci bien.En effet j'avais aussi pris cette résolution.
J'aurai du commencer directement comme ça.
Merci pour ces liens Smiley cligne
Sujet clos
Aller à