Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

[HTML - Map/area] Espacement indésirable dans un tableau sous IE

4 réponses
Avatar
Nat
Bonjour à tous !

Je vous soumet un truc qui me dépasse un peu :
Sur deux images placées dans un tableau, je crée toute une série d'"area".
Sous Mozilla, tout fonctionne à merveille ! Mais quand je teste sous IE 6,
j'ai un décalage entre les deux images, comme s'il y avait une bordure qui
s'était créée dans le tableau malgré le border="0".
Quelqu'un a déjà rencontré ce problème et surtout a trouvé l'explication et
la solution ?

<table width="100%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td align="center" valign="bottom"><img
src="images1.jpg" width="500" height="175" usemap="#Map">
<map name="Map">
<area shape="rect"
coords="210,158,228,174" href="#" title="title1" alt="title1">
<area shape="rect"
coords="243,124,259,138" href="#" title="title2" alt="title2">
<area shape="rect"
coords="203,123,219,142" href="#" title="title3" alt="title3">
<area shape="rect"
coords="219,125,236,141" href="#" title="title4" alt="title4">
<area shape="rect"
coords="213,141,230,158" href="#" title="title5" alt="title5">
<area shape="rect"
coords="230,138,242,153" href="#" title="title6" alt="title6">>
<area shape="rect"
coords="245,139,261,154" href="#" title="title7" alt="title7">
<area shape="rect"
coords="230,153,238,169" href="#" title="title8" alt="title8">
<area shape="rect"
coords="239,156,253,162" href="#" title="title9" alt="title9">
<area shape="rect"
coords="93,163,110,172" href="#" title="title10" alt="title10">
</map></td>
</tr>
<tr>
<td align="center" valign="top"> <img
src="images2.jpg" width="500" height="248" border="0" usemap="#Map2">
<map name="Map2">
<area shape="rect"
coords="108,19,119,30" href="#" title="title11" alt="title11">
<area shape="rect"
coords="129,22,143,38" href="#" title="title12" alt="title12">
<area shape="rect" coords="144,1,162,18"
href="#" title="title13" alt="title13">
<area shape="rect" coords="106,3,119,18"
href="#" title="title14" alt="title14">
<area shape="rect"
coords="119,10,134,23" href="#" title="title15" alt="title15">
<area shape="rect" coords="218,3,235,22"
href="#" title="title16" alt="title16">
<area shape="rect" coords="244,1,260,12"
href="#" title="title17" alt="title17">
<area shape="rect"
coords="169,40,188,56" href="#" title="title18" alt="title18">
<area shape="rect"
coords="160,55,179,69" href="#" title="title19" alt="title19">
<area shape="rect"
coords="189,39,207,56" href="#" title="title20" alt="title20">
<area shape="rect"
coords="216,69,231,87" href="#" title="title21" alt="title21">
<area shape="rect"
coords="224,57,240,70" href="#" title="title22" alt="title22">
<area shape="rect"
coords="231,71,246,88" href="#" title="title23" alt="title23">
<area shape="rect"
coords="285,47,302,66" href="#" title="title24" alt="title24">
<area shape="rect" coords="376,2,394,13"
href="#" title="title25" alt="title25">
<area shape="rect" coords="365,6,377,20"
href="#" title="title26" alt="title26">
<area shape="rect"
coords="378,13,394,27" href="#" title="title27" alt="title27">
<area shape="rect" coords="408,4,424,19"
href="#" title="title28" alt="title28">
<area shape="rect" coords="422,2,441,17"
href="#" title="title29" alt="title29">
<area shape="rect"
coords="402,211,421,228" href="#" title="title30" alt="title30">
<area shape="rect"
coords="351,117,370,137" href="#" title="title31" alt="title31">
<area shape="rect"
coords="342,90,359,111" href="#" title="title32" alt="32">
<area shape="rect"
coords="36,178,192,196" href="liena.html">
<area shape="rect"
coords="37,211,140,228" href="lienb.html">
</map></td>
</tr>
</table>

Un tout grand merci d'avance!

Nath.

4 réponses

Avatar
Lea GRIS
Nat a écrit

<td align="center" valign="top"> <img
src="images2.jpg" width="500" height="248" border="0" usemap="#Map2">



Tu a un espacement avant le <img>

Sémantiquement cet espace ne devrait pas être rendu mais IE est surement
assez stupide et non conforme aux standards pour l'afficher.

Par principe ne jamais laisser d'espace à l'intérieur d'un <td></td> quant
le contenu est autre que du texte.

Je n'ai pas IE pour vérifier si c'est bien ça se pb. Il faudra un volontaire
pour vérifier.

--
Léa Gris - http://www.noiraude.net/
() Campagne du ruban texte brut contre les courriels en HTML,
/ contre les pièces jointes dans un format propriétaire.
Avatar
Nat
Je n'ai pas IE pour vérifier si c'est bien ça se pb. Il faudra un


volontaire
pour vérifier.



Moi ! ;o)
Et... malheureusement, l'espace retiré ne change rien : le problème est
toujours là !

Nath.
Avatar
Jouanneau Laurent
Nat wrote:
Bonjour à tous !

Je vous soumet un truc qui me dépasse un peu :
Sur deux images placées dans un tableau, je crée toute une série d'"area".
Sous Mozilla, tout fonctionne à merveille ! Mais quand je teste sous IE 6,
j'ai un décalage entre les deux images, comme s'il y avait une bordure qui
s'était créée dans le tableau malgré le border="0".
Quelqu'un a déjà rencontré ce problème et surtout a trouvé l'explication et
la solution ?



essaye de mettre le style display:block sur tes images.


<table width="100%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td align="center" valign="bottom"><img
src="images1.jpg" width="500" height="175" usemap="#Map">
<map name="Map">
<area shape="rect"
coords="210,158,228,174" href="#" title="title1" alt="title1">
<area shape="rect"
coords="243,124,259,138" href="#" title="title2" alt="title2">
<area shape="rect"
coords="203,123,219,142" href="#" title="title3" alt="title3">
<area shape="rect"
coords="219,125,236,141" href="#" title="title4" alt="title4">
<area shape="rect"
coords="213,141,230,158" href="#" title="title5" alt="title5">
<area shape="rect"
coords="230,138,242,153" href="#" title="title6" alt="title6">>
<area shape="rect"
coords="245,139,261,154" href="#" title="title7" alt="title7">
<area shape="rect"
coords="230,153,238,169" href="#" title="title8" alt="title8">
<area shape="rect"
coords="239,156,253,162" href="#" title="title9" alt="title9">
<area shape="rect"
coords="93,163,110,172" href="#" title="title10" alt="title10">
</map></td>
</tr>
<tr>
<td align="center" valign="top"> <img
src="images2.jpg" width="500" height="248" border="0" usemap="#Map2">
<map name="Map2">
<area shape="rect"
coords="108,19,119,30" href="#" title="title11" alt="title11">
<area shape="rect"
coords="129,22,143,38" href="#" title="title12" alt="title12">
<area shape="rect" coords="144,1,162,18"
href="#" title="title13" alt="title13">
<area shape="rect" coords="106,3,119,18"
href="#" title="title14" alt="title14">
<area shape="rect"
coords="119,10,134,23" href="#" title="title15" alt="title15">
<area shape="rect" coords="218,3,235,22"
href="#" title="title16" alt="title16">
<area shape="rect" coords="244,1,260,12"
href="#" title="title17" alt="title17">
<area shape="rect"
coords="169,40,188,56" href="#" title="title18" alt="title18">
<area shape="rect"
coords="160,55,179,69" href="#" title="title19" alt="title19">
<area shape="rect"
coords="189,39,207,56" href="#" title="title20" alt="title20">
<area shape="rect"
coords="216,69,231,87" href="#" title="title21" alt="title21">
<area shape="rect"
coords="224,57,240,70" href="#" title="title22" alt="title22">
<area shape="rect"
coords="231,71,246,88" href="#" title="title23" alt="title23">
<area shape="rect"
coords="285,47,302,66" href="#" title="title24" alt="title24">
<area shape="rect" coords="376,2,394,13"
href="#" title="title25" alt="title25">
<area shape="rect" coords="365,6,377,20"
href="#" title="title26" alt="title26">
<area shape="rect"
coords="378,13,394,27" href="#" title="title27" alt="title27">
<area shape="rect" coords="408,4,424,19"
href="#" title="title28" alt="title28">
<area shape="rect" coords="422,2,441,17"
href="#" title="title29" alt="title29">
<area shape="rect"
coords="402,211,421,228" href="#" title="title30" alt="title30">
<area shape="rect"
coords="351,117,370,137" href="#" title="title31" alt="title31">
<area shape="rect"
coords="342,90,359,111" href="#" title="title32" alt="32">
<area shape="rect"
coords="36,178,192,196" href="liena.html">
<area shape="rect"
coords="37,211,140,228" href="lienb.html">
</map></td>
</tr>
</table>

Un tout grand merci d'avance!

Nath.





--
Laurent Jouanneau
http://openweb.eu.org pour les standards du web
Avatar
Nat
Problème résolu !

Je travaille avec Dreamweaver qui, lorsque l'on crée des map sur une image,
crée le code tel que vous avez pu le voir : le tag de début et de fin du map
englobe le tableau.
Si on consulte les normes, on voit que le map peut être entièrement défini
avant le tableau, soit

<map name="Map">
<area shape="rect" coords="210,158,228,174" href="#" title="title1"
alt="title1">
<area shape="rect" coords="243,124,259,138" href="#" title="title2"
alt="title2">
....
etc
...
</map>
<table width="100%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td align="center" valign="bottom"><img src="images1.jpg" width="500"
height="175" hspace="0" usemap="#Map">
</td>
</tr>
<tr>
<td align="center" valign="top"><img src="images2.jpg" width="500"
height="248" border="0" usemap="#Map">
</td>
</tr>
</table>

Et là, miracle, ça marche !

L'info pourra peut-être en intéresser d'autres qui pourraient un jour
rencontrer le même problème !

Et merci quand même pour vos réponses !

Nat.