18073 sujets

Questions générales et questions de débutants

Css valide dans ff mais out dans ie

Bonjour,
je tombe des nues quand je m'aperçois que le code css suivant ne laisse pas apparaitre les données dans internet explorer, alors que dans firefox, tout marche bien:

<style type="text/css">
body { 
        margin: 0;
        padding: 0;
	background-color: #000000;
}

#contener{
	position:absolute;
	left: 50%;
	top: 50%;
        width: 500px;
	height: 241px;
        margin-top: -120px; 
        margin-left: -250px;
}
</style>


avec un tableau et des découpes d'images dans une div contener...

<div id="contener">
<table id="Tableau_01" width="501" height="251" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><img src="../images/index_01.jpg" width="215" height="52" alt=""></td>
    <td><img src="../images/index_02.jpg" width="208" height="52" alt=""></td>
    <td><img src="../images/index_03.jpg" width="77" height="52" alt=""></td>
    <td><img src="../images/spacer.gif" width="1" height="52" alt=""></td>
  </tr>
  <tr>
    <td rowspan="3"><img src="../images/index_04.jpg" width="215" height="79" alt=""></td>
    <td><a href="http://www.poisson-rouge.com/site.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image26','','../images/rollovers/entrer.jpg',1)"><img src="../images/index_05.jpg" name="Image26" width="208" height="27" border="0"></a></td>
    <td><img src="../images/index_06.jpg" width="77" height="27" alt=""></td>
    <td><img src="../images/spacer.gif" width="1" height="27" alt=""></td>
  </tr>
  <tr>
    <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image27','','../images/rollovers/enter.jpg',1)"><img src="../images/index_07.jpg" name="Image27" width="208" height="36" border="0"></a></td>
    <td><img src="../images/index_08.jpg" width="77" height="36" alt=""></td>
    <td><img src="../images/spacer.gif" width="1" height="36" alt=""></td>
  </tr>
  <tr>
    <td rowspan="3"><img src="../images/index_09.jpg" width="208" height="47" alt=""></td>
    <td rowspan="3"><img src="../images/index_10.jpg" width="77" height="47" alt=""></td>
    <td><img src="../images/spacer.gif" width="1" height="16" alt=""></td>
  </tr>
  <tr>
    <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image29','','../images/rollovers/email.jpg',1)"><img src="../images/index_11.jpg" name="Image29" width="215" height="22" border="0"></a></td>
    <td><img src="../images/spacer.gif" width="1" height="22" alt=""></td>
  </tr>
  <tr>
    <td rowspan="2"><img src="../images/index_12.jpg" width="215" height="38" alt=""></td>
    <td><img src="../images/spacer.gif" width="1" height="9" alt=""></td>
  </tr>
  <tr>
    <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image28','','../images/rollovers/flash.jpg',1)"><img src="../images/index_13.jpg" name="Image28" width="208" height="29" border="0"></a></td>
    <td><img src="../images/index_14.jpg" width="77" height="29" alt=""></td>
    <td><img src="../images/spacer.gif" width="1" height="29" alt=""></td>
  </tr>
  <tr>
    <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image30','','../images/rollovers/private.jpg',1)"><img src="../images/index_15.jpg" name="Image30" width="215" height="20" border="0"></a></td>
    <td colspan="2" rowspan="2"><img src="../images/index_16.jpg" width="285" height="60" alt=""></td>
    <td><img src="../images/spacer.gif" width="1" height="20" alt=""></td>
  </tr>
  <tr>
    <td><img src="../images/index_17.jpg" width="215" height="40" alt=""></td>
    <td><img src="../images/spacer.gif" width="1" height="40" alt=""></td>
  </tr>
</table>
</div>


vous pouvez voir le résultat ici, c'est la page d'accueil qui pose problème.
J'ai remarqué que dès que je supprime la div contener dans le body, pof, réapparait le contenu...!
Modifié par foeb (01 Dec 2005 - 07:03)
Bonjour,

Fermer le commentaire HTML laissé ouvert dans l'élément style (non visible dans le code ci-dessus : voir le code en ligne).

Se préoccuper de valider le code HTML te faciliterait considérablement la résolution de ce type d'erreur, qui sont immédiatement signalées par le validateur HTML Smiley cligne
Modifié par Laurent Denis (01 Dec 2005 - 07:26)
Valide, non, pas vraiment :
HTML Tidy a écrit :
missing <!DOCTYPE> declaration"
<table> proprietary attribute "height""
<table> lacks "summary" attribute"
<img> lacks "alt" attribute"
<img> lacks "alt" attribute"
<img> lacks "alt" attribute"
<img> lacks "alt" attribute"
<img> lacks "alt" attribute"
Document content looks like HTML Proprietary"


Mais à défaut d'être valide (c'est à dire, compte tenu des erreurs ci-dessus, à défaut d'être accessible et indexable), ça marche très bien dans Opera.
Voilà une chose que l'on l'explique peut-être pas suffisament : l'invalidité CSS est beaucoup moins problématique que l'invalidité (X)HTML. On peut parfaitement vivre avec une CSS invalide, mais on ne peut pas développer de manière rationnelle et fiable sur un (X)HTML invalide.

Les raisons :

Les processus de gestion d'erreurs CSS et (X)HTML sont totalement différents, dans la norme et dans la pratique. Face à une ligne CSS syntaxiquement incorrecte, ou comportant une propriété inconnue, les moteurs de rendus doivent simplement l'ignorer. Certaines syntaxes CSS vont provoquer des bugs et avoir des conséquences dommageables. Mais elles sont très rares et d'une manière générale, les navigateurs gèrent très bien des CSS invalides. En outre, et c'est essentiel, l'utilisateur peut accéder au contenu (X)HTML avec la présentation par défaut de son navigateur en désactivant simplement la CSS. Opération simplissime dans Opera, moins évidente dans Firefox, rarement connue des utilisateurs d'IE, certes.

En revanche, face à une erreur (X)HTML, le navigateur est tenu de restituer tout de même le contenu concerné. L'histoire des navigateurs a conduit là-dessus à l'élaboration de processus de récupération d'erreurs (X)HTML propres à chaque navigateur, non normalisés, imprévisibles malgré leur excellence technique. Une erreur (X)HTML s'en remet donc au hasard pour ce qui est du résultat. Et l'utilisateur n'a aucun moyen de désactiver HTML pour accéder à quelque-chose, sauf à aller lire la source.

Ajoutons que le rendu CSS dépend du résultat du traitement du (X)HTML (la génération par le navigateur de l'arbre du document)... Que les navigateurs modernes adoptent le mode de rendu CSS strict ou Quirks (avec un mode intermédiaire pour Mozilla) en fonction du code HTML (doctype switching)...

Bref, l'invalidité (X)HTML peut très bien donner un bon résultat. Complètement pifométrique. Je préfère la garantie d'un résultat maîtrisé Smiley cligne

<edit>A propos des erreurs XHTML : c'est là où on apprécie pleinement l'XHTML traité en tant que XML. Une erreur XML n'autorise aucune récupération d'erreur, mais uniquement l'interruption du traitement et l'affichage d'une alerte. Autrement-dit, il suffit de consulter la page dans son navigateur (conforme) pour savoir qu'il y a un problème à corriger, et où il se situe exactement.
<re-edit>
Certes, ce n'est pas l'idéal par exemple pour un forum ou n'importe quel autre espace public que les utilisateurs sont susceptibles de flinguer sans rien comprendre au message d'erreur qui en résultera et sans que les admins n'en soient avertis. Mais en dehors de ce cas, c'est un confort inestimable...
</>
</>
Modifié par Laurent Denis (01 Dec 2005 - 10:45)
Sujet clos
Aller à