Img Découpée Et Survol Dreamweaver dans Typo3

J'ai généré une cartographie et une découpe d'image à partir de Fireworks qui se compose d'un tableau contenant les différents morceaux d'image, code Fireworks que j'ai repris dans Dreamweaver et que j'ai transférer dans Typo3 après en avoir téléchargé les différents morceaux d'image dans l'endroit had oc. Mon image est donc composée de plusieurs morceaux d'image contenu dans un tableau et d'une catographie avec zones sensibles.
Cela fonctionne parfaitement bien dans Dreamweaver mais s'affiche avec des décalages (espaces) importants entre les différents morceaux, dans le tableau, dans le document Typo3.
Merci d'avance pour votre aide

Bonjour aussi...

Sans une page en ligne, ce qui serait idéal, il sera difficile de t'en donner la cause. Si tu ne peux pas fournir une page en ligne, il te faudra au moins nous fournir le code html généré (pas les fichiers de template et ses fonctions php), ainsi que la feuille de style. Et dans ce cas tu peux aussi fournir des captures d'écran si nécessaire, bref tout ce qui peut aider à t'aider.

Ben voilà donc une copie de mon écran.

... et voici ma feuille de style :

/* shttp://www.bluerobot.com/web/layouts/ */
* {padding: 0; margin: 0;}

/*=================================================================================================
1. éléments html généraux
===================================================================================================*/
	
h1 {
	/*margin:0 0 0px 0;*/
	font-family: "Arial Narrow", Arial, Verdana;
	font-size: 230%;
	font-weight: normal;
	color:#838367;
}
	
h2 {
	margin:0px 0 20px 0px;
	padding: 0px;
	border: 0px;
	font-family:verdana, arial, helvetica, sans-serif;
	font-size: 130%;
	font-weight: lighter;
	color:#838367;
	}
	
h3 {
	margin:15px 0 10px 0;
	font-family:verdana, arial, helvetica, sans-serif;
	font-size:90%;
	font-weight:bold;
	color:#4D4D3C;
	letter-spacing:1px;
}
	
h4 {
	margin:16px 0 20px 0;
	font-family:verdana, arial, helvetica, sans-serif;
	font-size:75%;
	letter-spacing:1px;
	font-weight:bold;
	color:#AB3A10;
}

h5 {
	margin:16px 0 20px 0;
	font-family:verdana, arial, helvetica, sans-serif;
	font-size:70%;
	letter-spacing:1px;
	font-weight:bold;
	color:#666666;
}
	
p {
	margin:0 0 0px 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:small;
	line-height:inherit;
	/*rajout par pla@cediti.be le 08/05/2009 pour suppression de l'indentation  venant de la defaultstylesheet*/
	text-indent: 0px;
}
	
a {
	color:#09c;
	text-decoration:none;
	font-family:verdana, arial, helvetica, sans-serif;
}

/*modify by pla@cediti  08/05/2009 delete bolt link*/
/*a:link {color:#EA531A;}*/
a:link {color:#EA531A;font-weight:normal;}
a:visited {color:#A0A087;font-weight:normal;}
a:hover {background-color:#eee;}

ol {
	margin-top:10px;
	margin-left:50px;
	margin-bottom:10px;
	font-size:small;
	font-family:verdana, arial, helvetica, sans-serif;
}
	
ul {
	margin-top:10px;
	margin-left:50px;
	margin-bottom:10px;
	font-size:small;
	font-family:verdana, arial, helvetica, sans-serif;
}


/*=================================================================================================
2. zones div
===================================================================================================*/

.contenu p {
	margin-top:5px;
	margin-bottom:10px;
}



/* !! Les margin/padding sur TR ou TD cassent les images clicable composées */
.contenu table td {
	margin-top:0;
	margin-right:0;
	margin-bottom:0;
	margin-left:0px;
}

.sommaire p {
	margin:5px 0 10px 25px;
}

.sommaire table td {
	font-size:100%;
}

/*=================================================================================================
3. class
===================================================================================================*/

.liste_menu {
	margin-left:40px;
	line-height:20px;
	font-family:verdana, arial, helvetica, sans-serif;
	font-size:100%;
	font-weight:bold;
	letter-spacing:0px;
	list-style-type:none;
}

.liste_menu02 {
	margin-left:52px;
	line-height:28px;
	font-family:verdana, arial, helvetica, sans-serif;
	font-size:100%;
	font-weight:bold;
	letter-spacing:0px;
	list-style-type:none;
}



.liste_menu a{
	font-weight:bold;
}


.liste_sommaire {
	margin-left:40px;
	line-height:20px;
	font-family:verdana, arial, helvetica, sans-serif;
	font-size:100%;
	font-weight:bold;
	letter-spacing:0px;
}

.liste_sommaire a{
	font-weight:bold;
}

td ul.liste_sommaire{
	font-size:100%;
}

.liste_espace {
	margin-top:10px;
	font-size:x-small;
	font-weight:normal;
}

.labelfin {
	padding-bottom:0;
	margin-bottom:0;
}

.image_gauche {
	float:left;
	margin-right:10px;
}

.image_droite {
	float:right;
	margin-left:10px;
}

.legende {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	font-size: 75%;
}

.listeLegende {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 75%;
	margin-left: 50px;
}

.enbref {
	margin-left: 20px;
}

.gras {
	font-weight:bold;
}


/*=================================================================================================
4. feuilles outils
===================================================================================================*/


.annexe {
	background-color:#EAEAE3;
	color:#B8B8A3;
	font-family:"Arial Narrow", Arial, Verdana;
	font-size: 150%;
	font-weight: normal;
	height:30px;
	letter-spacing:0px;
	margin-top:0px;
	padding-bottom:0px;
	padding-left:5px;
	padding-top:0px;
	padding-bottom:0px;
}


.listeglossaire {
	font-size: 100%;
	list-style-type:none;
	margin:20px 0 20px 0;
}


.haut{
	font-size:70%;
	font-weight:bold;
	text-align:right;
	letter-spacing:1px;
}

.align-center {
	text-align:center;
}


/*=================================================================================================
5. table
===================================================================================================*/
table {
	border-collapse: collapse;
	empty-cells: show;
}

thead {
	color: #6B6B58;
	font-weight: bold;
	text-align: center;		
}

table.presentation {
	width: 100%;
	bgcolor: #EA531A;
	margin: 0px;
	padding: 0px;
	border: 0px;
	border-collapse: collapse;
}


table.titre2 {
	border-collapse: collapse;
	margin: 0px;
	border: 0px;
	width: 100%;
}

table.titre2 td {
	vertical-align:top;
	padding: 5px;
}

table.titre3 {
	margin: 0px;
	padding-left: 3px;
	border: 0px;
	width: 98%;
	font-weight: bold;
	color: #7B7B5E;
}

table.donnees {
	margin: auto;
	width: 75%;
	background-color: #FFFFFF;
	border: solid #DCDCD3 2px;
	border-collapse: collapse;
	text-align: center;
	vertical-align: middle;
	empty-cells: show;
	color: #9F9F8A;
}
table.donnees td {
	padding: 5px;
	border: solid #DCDCD3 2px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-align:center;
	color:#000000;
	font-size: 75%;
}

table.donnees th{
	padding: 5px;
	border: solid #DCDCD3 2px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 75%;
	text-align:center;
	color:#6B6B58;
	background-color: #ECECE8;
}

table.donnees_txt {
	margin: auto;
	width: 75%;
	background-color: #FFFFFF;
	border: solid #DCDCD3 2px;
	border-collapse: collapse;
	text-align: left;
	vertical-align: middle;
	empty-cells: show;
	color: #9F9F8A;
}

table.donnees_txt td {
	padding: 10px;
	border: solid #DCDCD3 1px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-align:left;
	color:#000000;
	font-size: 100%;
}

table.donnees_txt th{
	padding: 10px;
	border: solid #DCDCD3 2px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 75%;
	text-align:left;
	color:#6B6B58;
	background-color: #ECECE8;
}

table.enbref {
	margin: auto;
	width: 95%;
	background-color: #FFFFFF;
	color: #9F9F8A;
	border-collapse: separate;
}

table.enbref td {
	border: solid #ECECE8 3px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-align:left;
	vertical-align:top;
	color:#000000;
	font-size: 100%;
	padding: 10px;
}

table.enbref td a{
	font-weight:bold;
}

table.evrapide {
	margin: auto;
	width: 95%;
	background-color: #FFFFFF;
	border: solid #ECECE8 3px;
	border-collapse: collapse;
	empty-cells: show;
	color: #9F9F8A;
	padding: 0px;
}

table.evrapide td {
	border: solid #ECECE8 3px;
	padding: 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-align:left;
	vertical-align:top;
	color:#000000;
	font-size: 100%;
}

table.bouton {
	margin: auto;
	width: 95%;
	padding: 5px;
	background-color: #FFFFFF;
}

table.bouton td {
	padding: 5px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-align:left;
	vertical-align:top;
	color:#000000;
	font-size: 100%;
}

table.invisible2 {
	margin: auto;
	width: 95%;
	padding: 10px;
	background-color: #FFFFFF;
}

table.invisible2 td {
	padding: 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-align:left;
	vertical-align:top;
	color:#000000;
	font-size: 100%;
}

table.invisible3 {
	margin: auto;
	width: 95%;
	padding: 10px;
	background-color: #FFFFFF;
}

table.invisible3 td {
	padding: 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	/*text-align:*/
	/*vertical-align:*/
	color:#000000;
	font-size: 100%;
}

table.invisible4 {
	margin: auto;
	width: 50%;
	padding: 10px;
	background-color: #FFFFFF;
}

table.invisible4 td {
	padding: 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	color:#000000;
	font-size: 100%;
}

table.exemple {
	margin: auto;
	width: 75%;
	padding: 10px;
	background-color: #FFFFFF;
	border: solid #CB520A 3px;
	border-collapse: collapse;
	color: #CB520A;
}

table.exemple td {
	padding: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-style: italic;
	vertical-align: middle;
	color: #000000;
	font-size: 100%;
}

table.exemple thead {
	padding: 5px;
	border: solid #ECECE8 3px;
	font-family: monospace;
	font-weight:bold;
	text-align:center;
	color:#6B6B58;
	background-color: #ECECE8;
	font-size: 100%;
}

table.boutons {
	margin: auto;
	width: 95%;
	padding: 10px;
	background-color: #FFFFFF;
}

table.boutons td {
	padding: 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-align:left;
	vertical-align:top;
	color:#000000;
	font-size: 100%;
}

table.boutons th {
	padding: 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:100%;
	font-weight:bold;
	text-align: right;
	vertical-align:top;
	color:#FFFFFF;
	font-size: 100%;
}



/* class pour l'alignement  dans le RTE*/ 
.align-center {
text-align: center;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-justify {
text-align: justify;
}

Modifié par Florent V. (12 Nov 2010 - 18:01)

Et ...déjà merci pour l'aide apportée !
ps : je vois que ma copie d'écran n'apparait pas, je la renvoie donc !

sylvie59 a écrit :
Mon image est donc composée de plusieurs morceaux d'image contenu dans un tableau et d'une catographie avec zones sensibles.

Welcome back to 1999.

Sinon à vue de nez je dirais que le problème est celui-ci:
Espaces indésirables sous les images (l'article donne des solutions aussi).

Merci pour la réponse, mais en fait cela fonctionne parfaitement bien si je visionne le fichier Dreanweaver dans IE et Firefox, c'est quand je visionne le fichier Typo3 dans les mêmes navigateurs que là, j'ai des espaces entre les différents morceaux de mon image.

sylvie59 a écrit :
Merci pour la réponse, mais en fait cela fonctionne parfaitement bien si je visionne le fichier Dreanweaver dans IE et Firefox, c'est quand je visionne le fichier Typo3 dans les mêmes navigateurs que là, j'ai des espaces entre les différents morceaux de mon image.

OK.

Par contre:
- Tu ne nous as pas dit si tu avais lu l'article que j'ai indiqué, compris ce qu'il présente, et vérifié s'il s'agissait de ce problème ou non.
- Tu nous as donné un code CSS (mais pas le code HTML) qui, si je te lis bien, fonctionne parfaitement bien.
- Le problème se pose quand ta page est générée depuis Typo3, mais on n'a pas accès à la page en question pour constater nous-même le problème, ni même au code HTML généré.

Sans plus d'éléments de ta part on ne va pas pouvoir t'aider.