Problème de compatibilité sous FF

**BassT4ken** · 10/03/2009, 13h14

Bonjour,

J'ai un enième problème de compatibilité sous firefox. Les éléments du cadre s'affiche bien sous IE7 mais pas sous firefox. J'ai l'impression que quelques éléments sont indépendants du flux et se mettent où ils veulent.

Donc, ce serait super si quelqu'un pouvait m'aider ou m'aiguiller

IE7 :
[url=http://www.pixenli.com/images/mini/1236602239081392200.jpg]
Voir l'image en grand

Firefox :
[url=http://www.pixenli.com/images/mini/1236602517084851000.jpg]
Voir l'image en grand

Codes :

page_test.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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
#page{
margin-left:30px;
margin-right:30px;
margin-top:30px;
}
 
 
#text_page h1{
	font-size:large;
	margin-left:49px;
	margin-bottom:30px;
	}
 
 
#text_page p{
	font-size:small;
	text-align:justify;
}
 
#text_page{
	display:block;
	height:auto;
	}
 
#cadre_page{
	display:block;
	margin-left:20px;
	margin-bottom:20px;
	background-color:#e1e6df;
	border:2px solid #b5bab3;
	height:auto;
	width:250px;
	float:right;
 
}
 
#cadre_page img{
	margin:0 5px 5px 5px;
	width:240px;
	height:180px;
	}
 
#cadre2_page{
	margin: 5px;
	background:url(../Images/banarticle1.png);
	width:240px;
	height:20px;
}
 
.titre_article{
	font-weight:bold;
	font-size:small;
	color:black;
	}
 
.cadre_texte_caract1{
	margin: 0 5px 5px 5px;
	background:url(../Images/banarticle2.png);
	width:240px;
	height:20px;
	text-align:center;
	float:none;
	}
 
.cadre_texte_caract2{
	margin-left:5px;
	margin-bottom:5px;
	width:120px;
	height:15px;
	float:left;
	text-align:left;
	}
 
.cadre_texte_caract3{
	margin-left:5px;
	margin-bottom:5px;
	width:120px;
	height:15px;
	float:right;
	text-align:left;
	}
 
.texte_caract1{
	font-size:small;
	color:black;
	}
 
.texte_caract2{
	font-size:x-small;
	color:black;
	font-weight:bold;
	}
 
.texte_caract3{
	font-size:x-small;
	color:black;
	}

page_test.php

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
49
50
51
52
53
54
55
 
?>
 
<div id="page">	
	<div id="cadre_page">
		<div id="cadre2_page">
			<span class="titre_article">Caractéristiques
			</span>
		</div>
		<img src="photos/photo1.jpg"/>
 
		<div class="cadre_texte_caract1"><span class="texte_caract1">Géographie</span></div>
		<div class="cadre_texte_caract2"><span class="texte_caract2">Pays</span></div>
		<div class="cadre_texte_caract3"><span class="texte_caract3">Belgique</span></div>
		<div class="cadre_texte_caract2"><span class="texte_caract2">Climat</span></div>
		<div class="cadre_texte_caract3"><span class="texte_caract3">Tempéré</span></div>
		<div class="cadre_texte_caract2"><span class="texte_caract2">Superficie</span></div>
		<div class="cadre_texte_caract3"><span class="texte_caract3">50000 km²</span></div>
 
 
 
		<div class="cadre_texte_caract2"><span class="texte_caract2">Religion</span></div>
		<div class="cadre_texte_caract3"><span class="texte_caract3">Bouddhiste</span></div>
		<div class="cadre_texte_caract2"><span class="texte_caract2">Langue</span></div>
		<div class="cadre_texte_caract3"><span class="texte_caract3">Belge</span></div>
		<div class="cadre_texte_caract1"><span class="texte_caract1">Culture</span></div>
	</div>
 
	<div id="text_page">
		<h1>Camsim</h1>
		<p>
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
v
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
Woooohouuuuuu, je m'appelle Jérémie Boilan et je suis trop impatient d'aller à la Trance Energy !!!!! C'est la plus grande soirée du monde [lol]
 
		</p>
 
	</div>
 
</div>

Si vous avez besoin d'autre chose, prévenez moi [smile]

Merci

**desert** · 10/03/2009, 13h51

Salut,
tu peux tenter un clear:both sur tes div.cadre_texte_caract1.

Personnellement, j'aurais structuré d'une autre manière, comme par exemple :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div id="cadre_page">
    <h3>Caractéristiques</h3>
    <img src="photos/photo1.jpg" alt="" />
    <p class="titre">Géographie</p>
    <p>
       <span class="libelle">Pays</span>
       <span class="valeur">Belgique</span>
    </p>
    etc...
</div>

Parce qu'entourer tous tes span d'un div, ça me parait un poil lourd et inutile.

**BassT4ken** · 11/03/2009, 09h23

Ok je vais essayer tout ça

Le problème, est-ce que le libéllé et la valeur auront un écart identique pour chaque ligne ? avec des margin-left, l'écart sera le même entre les 2 mais la valeur sera à une place différente que la valeur du dessus, en fonction de la taille du libellé.

**BassT4ken** · 11/03/2009, 13h59

Merci, ça marche impec avec les clear:both;

Je n'ai pas encore essayé de changer ma structure car je m'occupe actuellement du formulaire...

Mais bon, n'étant pas un pro du CSS, je l'apprends depuis 6 mois, je me débrouille, cherche, essaye plusieurs combinaisons et c'est ainsi que j'arrive à quelque chose. Mais j'essaierai ta combinaison, car il faudra tout de même que j'optimise tout avant de rendre ce projet.

Problème de compatibilité sous FF

CSS

Vue hybride

Discussions similaires

Partager

Partager