Problème affichage image avec Firefox

**pscoool** · 01/09/2009, 12h27

bonjour,
j'ai créé une page index.html avec une image en arrière plan et des petites images que j'ai découpé avec photoshop pour les utiliser comme lien vers les autres pages.
sur ie ca marche tres bien mais sur mozilla les images sont decalées vers le haut.

voici les images sur ie et mozilla

Voila mon code :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style_azal.css" />
<title>azal peintre chanteur</title>
 
</head>
 
<body>
  <div id="general"> 
 
     <div id="biographie"><img src=bio.jpg" alt="biographie de azal" width="187" height="54" border="0" usemap="#Map">
       <map name="Map" id="Map">
         <area shape="rect" coords="4,3,184,52" href="biographie.html" />
       </map>
     </div>
 
     <div id="boutique"><img src="boutique.jpg" alt="boutique de azal" width="155" height="55" border="0" usemap="#Map2"  />
       <map name="Map2" id="Map2">
         <area shape="rect" coords="3,3,153,53" href="boutique.html" />
       </map>
     </div>
 
     <div id="musique"><img src="musique.jpg" alt="la musique de l'artiste" width="140" height="50" border="0" usemap="#Map3" />
       <map name="Map3" id="Map3">
         <area shape="rect" coords="3,4,139,49" href="musique.html" />
       </map>
     </div>
 
     <div id="galerie"><img src="galerie.jpg" alt="la galerie des oeuvres" width="130" height="50" border="0" usemap="#Map4" />
       <map name="Map4" id="Map4">
         <area shape="rect" coords="0,2,128,49" href="galerie.html" />
       </map>
     </div>
 
     <div id="livre_dor"><img src="livredor.jpg" alt="laissez vos impressions" width="155" height="41" border="0" usemap="#Map5" />
       <map name="Map5" id="Map5">
         <area shape="rect" coords="4,4,153,44" href="livredor.html" />
       </map>
     </div>
 
     <div id="videos"><img src="videos.jpg" alt="découvrez les vidéos de l'artiste" width="120" height="40" border="0" usemap="#Map6" />
       <map name="Map6" id="Map6">
         <area shape="rect" coords="3,4,118,41" href="videos.html" />
       </map>
     </div>
 
</div>
</body>
</html>

Et le code css:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
@charset "utf-8";
/* CSS Document */
 
html, body{
	height: 100%;
	background-color:#6D7678;
}
 
#general{
 
	width: 100%;
	height: 100%;
	max-width: 801px;
	min-width: 799px;
	max-height:537px;
	min-height:535px;
	background-image: url(blabla/index_arriere_plan.jpg);
	margin:auto;
}
 
#biographie{
    margin-top:50px;
	margin-left:99px;
	margin-right:515px;
 
}
 
#boutique{
 
	margin-left:270px;
	margin-right:375px;
	margin-top:10px;
}
 
#musique{
 
	margin-left:400px;
	margin-right:375px;
	margin-top:85px;
}
 
#galerie{
 
	margin-left:560px;
	margin-right:375px;
	margin-top:-216px;
}
 
#livre_dor{
 
	margin-left:130px;
	margin-right:510px;
	margin-top:240px;
}
 
#videos{
 
	margin-left:600px;
	margin-right:80px;
	margin-top:-10px;
}

merci d'avance.

**HiRoN** · 01/09/2009, 12h35

Bonjour et bienvenu sur le forum

Une page en ligne serait la bienvenue afin de pouvoir visualiser concrètement le problème.
Il est déconseillé de laisser des espaces dans le nom des fichiers / dossiers.

Pour le problème en question, peut-être une marge par défaut donné aux images.
Tu pourrais tenter un :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

img { margin:0; }

Mais difficile à dire sans pouvoir visualiser...

**pscoool** · 01/09/2009, 12h52

merci pour votre réponse j'ai rajouté les deux images ccomme cous me l'avez demandé
j'ai essayé ce que vous avez proposé mais ca ne marche toujours pas.

**HiRoN** · 01/09/2009, 13h00

Les images données ne correspondent pas avec le code...

De plus, quel est l'intérêt de mettre les images "boutique.jpg" etc... si tout est compris dans l'image de fond (et 2 images de fond ? Une pour FF, l'autre pour IE = pas bon) ?

**pscoool** · 01/09/2009, 13h14

j'ai rajouter les images pour pouvoir rajouter une zone reactive et faire des liens vers d'autres pages.
je suis débutant si il y a d autres solutions je suis preneur, encore merci

finalement j'ai réglé le problème
j'ai viré les images et j'ai laisse l'image principal et j'ai dessiné des zones réactives pour aller sur d'autres pages merci pour votre aide.

**Macmillenium** · 01/09/2009, 13h37

Bonjour,

La marge haute de #biographie a fusionnée avec celle du conteneur #general, on appel ce phénomène fusion des marges.
Sous IE7-, l'attribution de min/max/height et min/max/width confère le Layout et annule la fusion.

Sous les navigateurs modernes, tu peux l'annuler en attribuant par exemple padding:1px 0 ou overflow:hidden (contexte de formatage).

Problème affichage image avec Firefox

CSS

Discussions similaires

Partager

Partager