Décalage d'une map avec Firefox et IE.

telliak Messages postés 3668 Date d'inscription   Statut Membre Dernière intervention   -  
telliak Messages postés 3668 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
J'ai fait un site http://www.bourg-de-batz.fr/plan_site/plan_site.html, dans lequel en haut à gauche de chaque page, j'ai placé un bloc de navigation (voir image ci-dessous).
Pas de problème avec Chrome et Opera.
En revanche, avec Firefox et IE, la map subit un décalage vers la droite de 28 px, égal à la somme du padding et de la marge gauche de l'image, comme on le voit avec le message s'affichant au survol des «boutons», par exemple «Accueil» en passant sur la maison.
Quelqu'un saurait corriger ?
Merci d'avance
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,

De quel décalage parles tu ?




De plus... il serait bien de poster le code correspondant ( css et html) du bloc qui te pose problème
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
.
0
telliak Messages postés 3668 Date d'inscription   Statut Membre Dernière intervention   882
 
Re,
Merci de t'intéresser à mon problème.
Quand on passe la souris sur l'image, de gauche à droite, par exemple sur le cercle de la maison, son passage n'est reconnu que lorsque la souris atteint le bord droit de la maison, au lieu d'être pris en compte dès le premier point gauche du cercle.
Cette différence est de 28 px (+/- 1) soit la somme marge gauche + padding définis dans imagedenavigation .
Je ne comprends pas la raison de cette particularité avec FF.



Il me semblait plus simple d'afficher la page, raison pour laquelle je n''avais pas mis le code.

CSS 
body {
  margin: 0;
  padding: 0;
  font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
  background: url(images/fond_global_jolie_photo.jpg) fixed; 
  background-repeat:repeat;    /* Etend à la hache (CSS2 et +)                */
                               /* Va étendre ou limiter le fond d'écran à la  */
  background-size: 100% 100%;  /* hauteur et à la largeur de l'écran          */
}
#bogue_fixe {
  position: absolute; 
  width: 990px;  
  left: 50%; 
  margin-left: -495px;
  padding-top: 3px; padding-bottom: 3px; /* Marges intérieures haut et bas    */
}  
/* --- Définitions des bordures et des fond standards de blocs et autres ---- */     
.bordsetfondpage    {
  border-top :  1px solid MidnightBlue; border-right  : 2px solid MidnightBlue;
  border-left : 1px solid MidnightBlue; border-bottom : 2px solid MidnightBlue; 
  border-radius: 10px; -moz-border-radius: 10px; 
  -webkit-border-radius: 10px; -ms-border-radius: 10px; 
  background-image: url(images/fondconteneur.bmp); 
}
.imagedenavigation {
  float: left; 
  margin-left: 3px; 
  padding: 7px 25px; 
}
.centre       { text-align: center; }

HTML 
<body>

  <div id="bogue_fixe" class="bordsetfondpage">
<!--                Afficher le bloc de navigation globale                   -->
<!-- Texte inclus - Début - batz_navigation_globale.html -->
<!--                       Image de navigation globale                       -->
	<img class="bordsetfondcadre centre imagedenavigation" 
			 src="../images/navigation_globale.png" 
			 alt="Bloc de navigation" 
			 title="Bloc de navigation"  
			 usemap="#Map" />
	<map name="Map" id="Map">
		<area shape="circle" coords="55,45,20" alt="Accueil" title="Accueil" href="../index.html" />
		<area shape="circle" coords="105,45,21" href="javascript:history.go(-1)" target="_top" 
					alt="Retour à la page précédemment affichée" title="Retour à la page précédemment affichée" />

<!--       Incorporation du code d'appel de la génération d'un courrier      -->
		<script type="text/javascript">
		// Définition d'une variable contenant le début du code HTML
			var areatomail="";
		 // Ajout des différents éléments de l'adresse mail dans la variable
			areatomail +='<area shape="circle" coords="155,46,21" href="mailto:lagardere';
			areatomail +="@";
			areatomail +='gmail.com" alt="Nous écrire..." title="Nous écrire..." target="_blank" / >';
		// Ecrire la ligne
		//  alert (areatomail);
			document.write(areatomail);
		</script>
	</map>

<!-- Texte inclus -  Fin  - batz_navigation_globale.html -->
  
<!--                      Positionner l'image du titre                       -->
    <img class="bordsetfondcadre imagedutitre" 
         src="titrebatzplansite.png" 
         alt="Le Bourg de Batz aux XIXe et XXe siècles, titre de la page du plan du site" 
         title="Le Bourg de Batz aux XIXe et XXe siècles, titre de la page du plan du site" />
    <div class="fermeur"></div> 
...
0

Discussions similaires

Méssage Firefox ''Couldn't load XPCOM''
pistouri -
pistouri -

0 réponse
Smart IPTV décalage de son
Cynco -
bazfile -

1 réponse