Problème de positionner correctement le texte par rapport à l'image sous firefox

**ndiayebass** · 17/07/2007, 13h43

Bonjour à tous!
J'ai disposé sous forme de datagrid des composants comportant chacun une image et le texte associé. ça marche nickel sous ie7 mais pas sous firefox.
En effet sous firefox, les écritures sont au dessus de l'image. Je mets en bas le code. En vous remerciant d'avance pour votre aide.
CSS

Code :

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
 
 
.droite{
             float: left;
	width: 170px;
	margin-bottom:7px;
	font:small Arial, Helvetica, sans-serif;
	clear:both;
 
}
 
a{
         font: small "Bell MT", Verdana, Arial, Helvetica, sans-serif;
         text-decoration:none;
         color:#0066FF;
 }
 
a:hover{
 
           font: small "Bell MT", Verdana, Arial, Helvetica, sans-serif;
           text-decoration:underline;
           color:#0066FF;
 }
 
 
.milieu {
	margin-left: 200px;
             width: 170px;
	margin-bottom:7px;
	font:small Arial, Helvetica, sans-serif;
 
}
 
div#main{
 
    width:390px;
    margin-bottom:62px;
    clear:both;
 
}
 
.images{
 
     border:1px double black;
     float:left;
     margin-right:10px;
 
 }

HTML

Code :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"_http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd_ 
(http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd) ">
<html>
<head>
<title></title>
 
<link href="liquid.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">
function setStyle(id){
   //document.getElementById(id).style.border = "1px solid black";
   for(var i=0;i<4;i++){
      if(id == ('id'+i)){
          document.getElementById(id).style.border = "1px double #CCCCFF";
		   document.getElementById(id).style.background = "#CCCCFF";
	  }else{
	  document.getElementById('id'+i).style.border = "0px";
	  document.getElementById('id'+i).style.background = "#FFFFFF";
 
	  } 
	}
 
 
 
}</script>
</head>
<body>
 
<div id="main"><img src="../images/image0.png" width="158" height="119" class="images" /><b>Titre</b><p>Paragraphe titre</div>
 
<div id="id0" class="droite"><a href="#" onclick="setStyle('id0');"><img src="../images/image1.png" width="31" height="23" class="images" />Le S&eacute;n&eacute;gal dans la deuxi&egrave;me quinzaine </a></div>
 
<div id="id1" class="milieu"><a href="#" onclick="setStyle('id1');"><img src="../images/image2.png" width="31" height="23" class="images" />Le S&eacute;n&eacute;gal dans la deuxi&egrave;me quinzaine.
</a></div>
 
<div id="id2" class="droite"><img src="../images/image3.png" width="31" height="23" class="images" /><a href="#" onclick="setStyle('id2');">Le S&eacute;n&eacute;gal dans la deuxi&egrave;me quinzaine</a></div>
 
<div id="id3" class="milieu"><img src="../images/image4.png" width="31" height="23" class="images" /><a href="#" onclick="setStyle('id3');">Le S&eacute;n&eacute;gal dans la deuxi&egrave;me quinzaine</a></div>
 
 
 
</body>
</html>

**Strix** · 17/07/2007, 14h01

Salut

Bon moi j'obtiens ça sans rien changer:

Fait attention à ton doctype ! c'est :

Code :

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

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

**ndiayebass** · 17/07/2007, 14h33

Hello!
Je vous remercie de votre réponse mais je dois préciser que j'avais prévu d'avoir un datagrid. IE7 l'affiche correctement (voir figure), ce qui n'est pas le cas avec Firefox.
Merci de votre feedback!
IE7 le texte s'aafiche comme prévu.
Nom : capture_explorer.png
Affichages : 73
Taille : 81,3 Ko

Nom : capture_explorer.png
Affichages : 73
Taille : 81,3 Ko

Mozilla: Le texte est au dessus des images de gauche.
Nom : capture_mozilla.png
Affichages : 65
Taille : 96,0 Ko

**Strix** · 17/07/2007, 14h45

Tes liens ne sont pas construit de la même façon

Code :

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

1
2
<div id="id1" class="milieu"><a href="#" onclick="setStyle('id1');"><img src="../images/image2.png" width="31" height="23" class="images" />Le S&eacute;n&eacute;gal dans la deuxi&egrave;me quinzaine.</a></div>
<div id="id2" class="droite"><img src="../images/image3.png" width="31" height="23" class="images" /><a href="#" onclick="setStyle('id2');">Le S&eacute;n&eacute;gal dans la deuxi&egrave;me quinzaine</a></div>

Une fois l'image est dans <a> et puis après non...

**ndiayebass** · 17/07/2007, 16h49

Merci pour la remarque mais ça ne résout pas le problème!

Problème de positionner correctement le texte par rapport à l'image sous firefox

Positionnement en CSS

Discussions similaires

Partager

Partager