Probleme affichage IE7 au niveau des balises.

Bonjour, et tout d'abord merci à tout le monde d'etre là car vous m'avez tiré d'affaire plus d'une fois!

Alors je n'ai pas vraiment de problème, mais j'aimerai comprendre quelque chose.
Je travaille sur la realisation d'un site web qui doit etre compatible ss FF et IE.
Je respecte la norme W3C. SOus firefox, j'ai aucun probleme, mais alors sous IE, c'est n'importe quoi.

Voyez par vous meme. Voici le code que j'ai :

a écrit :

<table width="150" style="height:400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan ="8"width="50" style="height:400">
<img src="images/nosservices2.gif" alt="" width="50" style="height:400"/>
</td>

<td width="100" style="height:50">
<a href="index.php?page=nosservices" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/nosservices5.gif',1)"><img src="images/nosservices4.gif" alt="" name="Image3" width="100" height="50" border="0"/></a>
</td>

<tr>
<td width="100" style="height:50">
<a href="index.php?page=nosservices-servicepolyvalent" onmouseout="MM_swapImgRestore()"onmouseover="MM_swapImage('Image4','','images/nosservices7.gif',1)"><img src="images/nosservices6.gif" alt="" name="Image4" width="100" height="50" border="0"/></a>
</td>
</tr>
<tr>
<td width="100" style="height:50">
<a href="index.php?page=nosservices-hebergementtemporaire" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/nosservices9.gif',1)"><img src="images/nosservices8.gif" alt="" name="Image5" width="100" height="50" border="0"/></a>
</td>
</tr>
<tr>
<td width="100" style="height:50">
<a href="index.php?page=nosservices-servicemandataire" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/nosservices11.gif',1)"><img src="images/nosservices10.gif" alt="" name="Image6" width="100" height="50" border="0"/></a>
</td>
</tr>
<tr>
<td width="100" style="height:50">
<a href="index.php?page=nosservices-viesociale" onmouseout="MM_swapImgRestore()"onmouseover="MM_swapImage('Image7','','images/nosservices13.gif',1)"><img src="images/nosservices12.gif" alt="" name="Image7" width="100" height="50" border="0"/></a></td>
</tr>
<tr>
<td width="100" style="height:50">
<a href="index.php?page=nosservices-coordinationtherapeutique" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/Appartementtherapeutique2.bmp',1)"><img src="images/Appartementtherapeutiq.bmp" alt="" name="Image8" width="100" height="50" border="0"/></a>
</td>
</tr>
<tr>
<td width="100" style="height:50">
<a href="index.php?page=nosservices-crechesaintelucie" onmouseout="MM_swapImgRestore()" onmouseover=
"MM_swapImage('Image10','','images/nosservices19.gif',1)"><img src="images/nosservices18.gif" alt="" name="Image10"
width="100" height="50"
border="0"/></a>
</td>
</tr>
<tr>
<td width="100" style="height:50">
<a href="index.php?page=nosservices-dispositifevaluation" onmouseout="MM_swapImgRestore()"onmouseover="MM_swapImage('Image9','','images/nosservices17.gif',1)"><img src="images/nosservices16.gif" alt="" name="Image9" width="100" height="50" border="0"/></a>
</td></tr>


</table>

Voici ce que j'obtiens :

Maintenant, lorsque je colle le </td> au </a>, j'ai un affichage correct comme voici.

On peut d'ailleurs remarquer qu'il n'y a pas d'espace entre "vie sociale et appartement thérapeutique dans le 'mauvais' code et que le </td> est collé au </a>..

Moi qui aime le code propre c'est à dire bien indenté (je sais pas si ça va se voir dans le cas présent) ben je suis pas gaté.

J'ai bien galéré avant de trouver, et je n'arrive pas à comprendre pourquoi! Normallement c'est correct mon code non?
Je marche avec des include et mon doctype est dans mon fichier index.

Merci d'avance


Mince l'indetation n'est pas prise en compte, si vous voulez, je peux l'indenter sur demande ^^
Modifié par scratchoun (31 Jan 2007 - 11:45)

Bonjour et bienvenu sur le Forum...

Tu dis respecter les normes du W3C ...
Cependant, la mise en page au moyen de tableau... C'est pas ce qu'il y a de plus standard...

Au vu de ce que tu comptes obtenir, pour ma part, j'utiliserais tout simplement une liste <ul> agrémentée d'un arrière-plan (ton bandeau vertical) et des éléments <li> (munis du padding adapté) qui contiendrons tes liens...

Voilà, en espérant avoir pu t'aider à y voir plus clair.

Cygnus a écrit :
Tu dis respecter les normes du W3C ...
Cependant, la mise en page au moyen de tableau... C'est pas ce qu'il y a de plus standard...

Hello,

Personnellement, ce n'est pas forcément le choix de la mise en page via tableaux qui me gêne, mais surtout :
- une information cruciale (le menu de navigation) qui est véhiculée uniquement pas des images et pire, des images sans alternative textuelle (attribut alt vide)
- un comportement de rollover en javascript (lourd, parasite et pas actif partout) alors qu'il ne s'agit ici que de modifier une couleur de fond et/ou de texte

Pour les solutions, j'abonde dans le sens de Cygnus à savoir :
- une liste d'éléments (ici des liens)
- le contenu "nos services" en image d'arrière-plan dans le menu (<ul>) avec alternative (image obligatoirement puisque rotation de texte)
- les liens (<a>) affichés sous forme de blocs, et un comportement rollover simplement en employant la pseudo-classe :hover + :focus

Un peu comme ce menu-type : http://css.alsacreations.com/xmedia/exemples/menunew/menu1.html

Pour rappel, le tutoriel correspondant.

Bonne chance
Modifié par Raphael (31 Jan 2007 - 19:53)

Oki, j'ai tout noté. Merci beaucoup en tout cas dae la rapidité à laquelle vous m'avez repondu.

Je viens de reprendre en main le site dont la base avait déjà été faite. J'ai pas eu le tps de vérifier, tout et je vais changer les attribut alt, ou mieux faire comme vous m'avez dit.

Mais il me reste une question. A quoi est due cette erreur d'affichage? Je n'arrive pas à comprendre pourquoi un retour chariot modifie à ce point l'affichage.

Sinon je vais réviser tout ce qui est norme W3C je crois que j'en ai besoin...

Encore merci ^^