Il y a 93 avertissemenst de Tidy, tous les mêmes : "trimming empty <span>", je comprends pas comment W3C valide OK. Pour moi, les différences d'interprétation par les navigateurs peuvent avoir 2 raisons :
- erreurs de code (malgré le OK du validateur)
- tableau : une mise en pages par tableaux est mal comprise par les navigateurs, surtout s'ils contiennent des images, ce qui est le cas ici.
Il y a des images pour faire les fonds dégradés derrière les textes, incluses dans les <td>, ça, ça donne jamais un bon comportement, les tableaux ne sont pas faits pour contenir des images.
C'est pour ça que ça décale plus ou moins.
"trimming empty span" : c'est à dire qu'il ya des span supposés appliquer une mise en forme, qui sont refermés sans entourer le moindre texte :
Code : Tout sélectionner
<span style="text-decoration: underline; font-style: italic; font-weight: bold;"></span>
(ligne 7, 28, 31, 37 etc...) on les voit trés bien avec l'extension HTML validator.
Ca devrait quand même pas aider les navigateurs à afficher correctement? Non? Ceci dit, encore une fois, il a la validation, ce sont pas des erreurs, que des avertissements!
Bon, krystof, il faudrait que tu nettoies ton code avec Tidy. Voici un bout de ton code :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><title>traitement vidéo</title></head>
<body style="color: rgb(192, 192, 192); background-color: rgb(0, 0, 0);" alink="#ff0000" link="#ff0000" vlink="#ff0000"><div style="text-align: center;"><div style="text-align: left;"><br></div><table style="text-align: left; width: 949px; height: 32px;" border="0"><tbody><tr><td style="font-style: italic; font-weight: bold; text-align: center; color: rgb(255, 0, 0); width: 97px;"><a href="../index.html"><span style="text-decoration: underline;">Accueil</span></a></td>
<td style="text-align: center; text-decoration: underline; font-style: italic; font-weight: bold; width: 121px;"><a href="traitementvideo.html">Vidéo</a></td> <td style="text-align: center; text-decoration: underline; font-style: italic; font-weight: bold; width: 101px;"><a href="traitementaudio.html">Audio</a></td>
<td style="text-align: center; width: 207px;"><a href="commentcamarche.html"><span style="font-style: italic; text-decoration: underline; font-weight: bold;">Comment
ça marche</span></a></td><td style="text-align: center; width: 108px;"><a href="lexique.html"><span style="font-weight: bold; font-style: italic; text-decoration: underline;">Lexique</span></a></td><td style="text-align: center; width: 135px;"><span style="text-decoration: underline; font-style: italic;
et là-dessous le même, nettoyé :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>traitement vidéo</title>
</head>
<body style=
"color: rgb(192, 192, 192); background-color: rgb(0, 0, 0);" alink=
"#FF0000" link="#FF0000" vlink="#FF0000">
<div style="text-align: center;">
<div style="text-align: left;"><br></div>
<table style="text-align: left; width: 949px; height: 32px;"
border="0">
<tbody>
<tr>
<td style=
"font-style: italic; font-weight: bold; text-align: center; color: rgb(255, 0, 0); width: 97px;">
<a href="../index.html"><span style=
"text-decoration: underline;">Accueil</span></a></td>
<td style=
"text-align: center; text-decoration: underline; font-style: italic; font-weight: bold; width: 121px;">
<a href="traitementvideo.html">Vidéo</a></td>
<td style=
"text-align: center; text-decoration: underline; font-style: italic; font-weight: bold; width: 101px;">
<a href="traitementaudio.html">Audio</a></td>
<td style="text-align: center; width: 207px;"><a href=
"commentcamarche.html"><span style=
"font-style: italic; text-decoration: underline; font-weight: bold;">
Comment ça marche</span></a></td>
<td style="text-align: center; width: 108px;"><a href=
"lexique.html"><span style=
"font-weight: bold; font-style: italic;
Utilise Kompozer plutôt que NVU, nettoie ton code, toutes les explis sont là, merci chinon37 :
http://www.geckozone.org/forum/viewtopic.php?t=51228
Et euh... quand tu auras fait tout ça, ben, abandonne les tableaux, ou alors ne mets aucune image dedans, rien que du texte. D'ailleurs,
fais déjà l'essai de virer les images de dégradés et tu verras que tu n'auras plus de décalage, mais si tu veux les garder alors, pas de tableaux, des blocs, div ou autres qui remplacent les cellules et le reste, simplifie-toi la vie!
Bon courage.
)
)
