Probleme d'affichage de div sous Firefox (cadre bleu)

Question

xeNz

12 Nov 2007 à 13:06

Bonjour à toute et à tous,
je suis nouveau sur ce forum et je vous remercie d'avance de l'aide que vous pourrez m'apporter.

Je vous expose mon problème :
Je travaille actuellement sur un site dont l'interface a été créée sous toshop, découpée à l'aide des tranches et exportée en HTML.

Sur cette base de code j'ai effectué quelques modifications pour la mise en page à l'aide de Dreamweaver et j'ai donc tracé 2 "div pour élément PA" (dénomination utilisée dans le logiciel) afin d'ajouter des zones de texte pour mon sous menu et ma zone de bas de page au dessus de mes images du template définie en usemap="background".

Le problème arrive sous firefox lors de la visualisation de la page. En effet ces div aparaissent avec un contour bleu et donc décalent tout mon template et en plus c moche...
apercu : http://all.in.com.free.fr/champsmemoire/FF.png

Alors que sous internet explorer ou Safari (je travaille sur MAC) il n'y a pas ce problème et le rendu est comme je le souhaite.
apercu : http://all.in.com.free.fr/champsmemoire/IE.png

Je vous ajoute mon code HTML :

<html>
<head>
<title>Champsmemoirev1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	width:191px;
	height:383px;
	z-index:1;
}

-->
</style>
<link href="champsmemoire.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
#apDiv2 {
	position:absolute;
	width:834px;
	height:22px;
	z-index:2;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Champsmemoirev1.psd) -->
<table id="Tableau_01" width="861" height="621" border="0" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td colspan="12">
			<img src="images/index_01.jpg" width="860" height="9" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="9" alt=""></td>
	</tr>
	<tr>
		<td rowspan="9">
			<img src="images/index_02.jpg" width="5" height="611" alt=""></td>
		<td colspan="3" rowspan="2">
			<img src="images/index_03.jpg" width="216" height="107" alt=""></td>
		<td colspan="7">
			<img src="images/index_04.jpg" width="634" height="106" alt=""></td>
		<td rowspan="9">
			<img src="images/index_05.jpg" width="5" height="611" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="106" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<a href="leslivres.html" target="_self">
				<img src="images/Champsmemoirev1_06.jpg" width="99" height="44" border="0" alt=""></a></td>
		<td rowspan="2">
			<a href="lesexpositions.html" target="_self">
				<img src="images/Champsmemoirev1_07.jpg" width="123" height="44" border="0" alt=""></a></td>
		<td rowspan="2">
			<a href="lescartespostales.html" target="_self">
				<img src="images/Champsmemoirev1_08.jpg" width="180" height="44" border="0" alt=""></a></td>
		<td rowspan="2">
			<a href="galleriesphoto.html" target="_self">
				<img src="images/Champsmemoirev1_09.jpg" width="130" height="44" border="0" alt=""></a></td>
		<td rowspan="2">
			<a href="contact.html" target="_self">
				<img src="images/Champsmemoirev1_10.jpg" width="84" height="44" border="0" alt=""></a></td>
		<td colspan="2" rowspan="3">
			<img src="images/index_11.jpg" width="18" height="52" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<a href="quisommesnous.html" target="_self">
				<img src="images/Champsmemoirev1_12.png" width="216" height="43" border="0" alt=""></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="43" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="images/index_13.jpg" width="832" height="8" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="8" alt=""></td>
	</tr>
	<tr>
		<td rowspan="5">
			<img src="images/index_14.jpg" width="8" height="453" alt=""></td>
		<td>
			<div id="apDiv1">
			  <p class="sousmenu"><a href="association.html" target="contenu" class="sousmenu">L'association</a></p>
			  <p class="sousmenu"><a href="statuts.html" target="contenu">Les statuts</a></p>
			  <p class="sousmenu"><a href="temoignages.html" target="contenu">Les t&eacute;moignages</a></p>
			  <p class="sousmenu">&nbsp;</p>
		  </div>
			<img src="images/index_15.jpg" width="191" height="383" usemap="background"></td>
		<td rowspan="3">
			<img src="images/index_16.jpg" width="17" height="421" alt=""></td>
		<td colspan="6" rowspan="2"><iframe id="contenu" name="contenu" src="" frameborder="0" align="left" height="394" width="626"></iframe></td>
  <td rowspan="5">
			<img src="images/index_18.jpg" width="8" height="453" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="383" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/index_19.jpg" width="191" height="38" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="11" alt=""></td>
	</tr>
	<tr>
		<td colspan="6">
			<img src="images/index_20.jpg" width="626" height="27" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="27" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
			<div id="apDiv2">
			  <div align="center" class="basdepage"><a href="index.html" target="_self">Accueil</a> - <a href="mentions.html" target="wclose10" onClick="window.open('mentions.html','wclose10','width=360,height=270,scrolling=yes,toolbar=no,status=yes,left=20,top=30')">Mentions l&eacute;gales</a> - 2007 &copy; copyright <a href="http://www.all-in-com.fr/" target="_blank">All-in Communication</a>  - <a href="contact.html" target="_self">Contact</a></div>
			</div>
			<img src="images/index_21.jpg" width="834" height="22" usemap="background"></td>
		<td>
			<img src="images/spacer.gif" width="1" height="22" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="images/index_22.jpg" width="834" height="10" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="10" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="5" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="8" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="191" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="17" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="99" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="123" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="180" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="130" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="84" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="10" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="8" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="5" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

ainsi que la feuille de style CSS reliée au document

@charset "UTF-8";
/* CSS Document */

.sousmenu {
	font-family: tahoma;
	font-size: 12px;
	color: #333333;
}
a:link {
	color: #333333;
}
a:visited {
	color: #333333;
}
a:hover {
	color: #FFFFFF;
}
a:active {
	color: #333333;
}
a {
    text-decoration: none;
}
.basdepage {
	font-family: tahoma;
	font-size: 9px;
}
.sousmenu2 {
	font-family: tahoma; 
	font-size: 10px; 
	color: #333333; 
}
.edito {
	color: #FFFFFF;
	font-size: 13px;
	font-family: tahoma;
	font-style: italic;
}
.sousmenuL {
	font-family: tahoma;
	font-size: 12px;
	color: #FFFFFF;
}
.sousmenu2L {
	font-family: tahoma; 
	font-size: 10px; 
	color: #FFFFFF; 
}

J'espere avoir fourni les informations nécessaires... merci de m'éclairer si vous avez déjà rencontré ce problème.

Par avance merci à toutes et à tous.
Bonne journée

Heyoan

12 Nov 2007 à 15:32

Salut xeNz,

un petit tour dans la FAQ Smiley cligne

...

A+

Sujet clos

CSS et mise en forme, CSS3

Probleme d'affichage de div sous Firefox (cadre bleu)