[CSS] probleme avec firefox

Version imprimable

soit la page suivante à ouvrir avec IE puis firefox:
http://sebastien.tiscar.club.fr/sof/NewsXML.xml
bon vous voyez bien le soucis avec les images je suppose
étant un doc xml on ne voit pas vraiment le code mais disons que c est écrit ainsi
pour un élément

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<div class="RSS">
  <div class="item">
    <div class="title"><a href="http://www.sofreavia.com">Titre3</a></div>
    <div class="content">
      <div class="img"><img src="http://images.google.fr/images?q=tbn:RB8dwah8OCPKgM:http://lapuissancemillenere.viabloga.com/images/goku_t.jpg"></div>
      <div class="description" align="right">Description 3 zoirgfe zrhozrgh zoir gozie goize bgoizbnoizeb oizebr goizbegoizbe gobzegoibzerogbzorebgozb ozbgozbegobzuzbeg u ob oib ioboib oibeafo b obqzeofub oouebf zefoib 
      </div>
    </div>
  </div>
 <div class="item">
   <div class="title">Titre 2</div>
   <div class="content">
     <div class="img"><img src="http://www.developpez.com/template/logo.gif"></div>
     <div class="description" align="right">Description2</div>
    </div>
  </div>
</div>

et les css correspondantes...

Code:

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
/*Contient ttes les news*/
.RSS{
	width:100%;
	float:left;
	display:block;
	margin-bottom:1px;
}
.RSS .item{
	display: block;
	border: thin solid #008AB5;
	padding: 10px;
	margin: 5px;
	width: 800px;
}
.RSS .item .title{
	background-color: #00A5D9;
	margin: 3px;
	padding: 5px;
	font: bold larger;
	letter-spacing: 3px;
	text-align: left;
	text-indent: 15;
	word-spacing: 5;
}
.content{
display:block;
float:left;
width:800px;}
.RSS .item .img{
	border: medium solid Black;
	border-width: 3;
	margin: 1;
	display: inline;
	float:left;
}
 
.RSS .item .description{
	display: inline;
	float: left;
	margin: 1;
	text-align: justify;
}

ce que je ne comprend pas c est pourquoi mon image est "au dessus" du reste...pourtant avec IE...nickel..
si qq un comprend mon soucis, je le remercie de m aider.

20/07/2006, 16h45
PuppeT mAsTer

Ton problème est fréquent : il vient de IE à vrai dire !! Microsoft n'a pas suivi les normes W3C pour son navigateur et en gros IE n'a pas les mêmes "mesures" que Firefox donc il te faut créer une CSS pour IE et uen pour FF et les autres navigateurs suivant les normes. ;)

++

PM
20/07/2006, 16h46
luta

je comprend pas...ou est l erreur donc?
20/07/2006, 16h48
PuppeT mAsTer

L'erreur est dans les softs qui ne comprennent pas la même chose dans tes mesures de placements de tes div. Grossièrement tu dis 3 px au deux, FF comprendra 3px et IE comprendra 2px par exemple. D'où la necessité de créer deux CSS avec une détection du navigateur client. ;)

PM
20/07/2006, 16h54
luta

ok, mais je ne voies pas de solution du coup puisque je ne connais pas la taille de mon image...
normalement,
le div contenant le div qui lui contient l image devrait se resizer automatiquement or ce n est pas le cas on dirait..du coup, je ne sais vraiment pas comment régler mon problême.. la taille des img changeant tout le temps
20/07/2006, 17h16
masu

la premiere chose qui me derange c'est l'abscence de doctype.
Deuxiement ca fait pas un peu beaucoup de div tout ca.

Ensuite pour ton image je ferai bien un float:left dessu
20/07/2006, 17h21
luta

le doctype n est utile que pour la validation...or ce que je veux c est simplement que tout le monde puisse voir mon doc...

la quantité de div est peut être un peu importante certes mais je suis loin d être un spécialiste webmaster ...:aie: :aie:

Citation:

Ensuite pour ton image je ferai bien un float:left dessu

est ce que tu veux dire que je peux virer le div qui entoure l image et mettre une propriété css flaot: left sur l image elle même?

quelque chose dans ce genre serait plus clair il me semble

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="RSS">
  <div class="item">
    <h3 class="title"><a href="http://www.sofreavia.com">Titre3</a></h3>
    <img class="img" src="http://images.google.fr/images?q=tbn:RB8dwah8OCPKgM:http://lapuissancemillenere.viabloga.com/images/goku_t.jpg"> Description 3 zoirgfe zrhozrgh zoir gozie goize bgoizbnoizeb oizebr goizbegoizbe gobzegoibzerogbzorebgozb ozbgozbegobzuzbeg u ob oib ioboib oibeafo b obqzeofub oouebf zefoib
    <div class="spacer">&nbsp;</div>
  </div>
  <div class="item">
    <h3 class="title">Titre 2</h3>
    <img class="img" src="http://www.developpez.com/template/logo.gif"> Description2
    <div class="spacer">&nbsp;</div>
	</div>
</div>

Code:

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
.RSS{
	width:100%;
	margin-bottom:1px;
}
.RSS .item {
	border: thin solid #008AB5;
	padding: 10px;
	margin: 5px;
	width: 800px;
	text-align: justify;
}
.RSS .item .title {
	background-color: #00A5D9;
	margin: 3px;
	padding: 5px;
	font: bold larger;
	letter-spacing: 3px;
	text-align: left;
	text-indent: 15;
	word-spacing: 5;
}
.content {
	display:block;
	float:left;
	width:800px;
}
.RSS .item .img {
	border: medium solid Black;
	border-width: 3;
	margin: 1;
	float:left;
}
 
.spacer {
	clear:both;
	height:1px;
	line-height:1px;	
}

20/07/2006, 17h32
masu

Citation:

Envoyé par luta

le doctype n est utile que pour la validation...or ce que je veux c est simplement que tout le monde puisse voir mon doc...

Le doctype ne sert pas qu'a la validation, suivant le doctype les navigateurs peuvent avoir différents rendus.
Si tu veu que ton site soit lisible convenablement tu doit quand meme produire un document HTML valide.
20/07/2006, 17h32
luta

Merci bcp je vais essayer ça.:mrgreen:
20/07/2006, 17h40
luta

hummm je vois,
est ce que les logiciels du type dreamweaver peuvent nous "forcer" à respecter un doctype?
Merci pour votre aide en tout cas
20/07/2006, 17h54
masu

Citation:

Envoyé par luta

hummm je vois,
est ce que les logiciels du type dreamweaver peuvent nous "forcer" à respecter un doctype?
Merci pour votre aide en tout cas

Non dreamweaver ne fait pas ca, je ne connais pas de logiciels qui le font.
Par contre tu peu utiliser l' extention firefix html validator, il te met une petite icon en bas a droite pour t'indiquer si ton code est valide ou pas tres pratique je trouve.
ensuite il y a le site de la w3c pour valider.