[résolu] Margin pas pri en compte sur Firefox

Bonjour a tous, j'ai fait sur mon site une partie qui presente ces membres, j'ai fait la mise en page en CSS avec IE et quand j'ai regardé a la fin sous Firefox j'ai remarquer qu'il ne prenais pas en compte certain de mes parametres, exemple sur la div nom le margin-top, pareil pour la div texte 2...

J'vois pas comment resoudre ce beug, pouvez vous m'aider?


J'vous met le resultat sur IE:

http://img255.imageshack.us/img255/2006/artiesl2.jpg
Et la sur Firefox:

http://img184.imageshack.us/img184/3133/artfirefoxue5.jpg
Mon html:

<div id="conteneur">

		
        
<?php

session_start();

require_once('connec_bdd.php');

$nom4=($_GET['nom']);

		$_SESSION['membre'] = $nom4;
		
		
	echo ('<div id="lien_gal"><a href="../galerie/galerie.php"target="contenu" class="a">Voir la galerie</a></div>');
		
			$requete = "select * from utilisateur where nom ='".$nom4."' ";
			
			
		
		$resultat = mysql_query($requete);
		
		while ($row = mysql_fetch_row($resultat))
		
		{
		
		$texte = $row[2];
 
		$texte2 = $row[3];

		$nom2 = $row[4];
		
		$statut = $row[5];
		
		$photo = $row[7];
		
		
		echo nl2br('<div id="texte">'.$texte.'</div>');
		
		echo nl2br('<div id="nom">'.$nom2.'</div>');
		
		echo ('<div id="statut">'.$statut.'</div>');
		
		echo ('<div id="photo"><img src="'.$photo.'" alt="'.$nom2.'" WIDTH=130 HEIGHT="180" \></div>');

		echo nl2br('<div id="texte2">'.$texte2.'</div>');

		}

?>

		
		
</div>

Mon Css:

*{
	list-style-type: none;
	margin : 0px;
	padding:0px;
}

body{

	/*height: 100%;*/
	margin: 0px;
	padding: 0px;
}


#conteneur{
	width: 460px;
	height: 470px;
	margin: 0px;
	background-image: url(../images/iframe_contenu.jpg);
	
}

#lien_gal{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: right;
	float: right;
	width: 270px;
	height: 20px;
	margin: 20px 20px 0px 0px;
}

#photo{
	width: 130px;
	height: 180px;
	margin: 5px 20px 0px 20px;

	
}

#nom{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #58585a;
	width: 130px;
	margin: 20px 20px 5px 20px;
	text-align: center;	
}

#statut{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #892052;
	width: 130px;
	margin: 0px 20px 0px 20px;
	text-align: center;
}

#texte{
	position:absolute;
	text-align: justify;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	white-space: normal;
	color: #58585a;
	width: 270px;
	height: 180px;
	margin: 60px 2px 0px 170px;
	
}

#texte2{
	width: 460px;
	text-align: justify;
	font-family: Arial, Helvetica, sans-serif;
	white-space: normal;
	font-size: 13px;
	color: #892052;
	margin: 20px 20px 20px 20px;
	width: 420px;
	height: 186px;
}


/*-------------Couleur des liens non visité */

.a:link {
	
	text-decoration: none;
	color: #e5374a;
	
}

/*-------------Couleur des liens visité */

.a:visited {
	text-decoration: none;
	color: #e5374a;
	
}

/*-------------Couleur des liens au survol de la souris */

.a:hover {
	text-decoration: none;
	color: #ef965f;
	
}

/*-------------Couleur des liens quand il y a le click */

.a:active {
	text-decoration: none;
	color: #e5374a;

}

Merci d'avance!!!
Modifié par Chat (11 Jun 2008 - 17:28)

il y a souvent des differences entre IE et firefox, as tu essayer de mettre une margin plus importante avant celle d'ie avec !important a la fin (avant le ; )?
Modifié par Woulf (04 Jun 2008 - 12:37)

Bonjour,

le code PHP ne nous est d'aucune malheureusement. Seul ce que reçoit le navigateur, à savoir le code HTML, est intéressant pour le rendu de la page
Aurais-tu une page en ligne ou sinon ce code HTML?

Remarque: mieux vaudrait que tu utilises du faux-texte plutôt que "aaaaaaaaaaaaaaaaaaaaaaaaaa" qui ne représente pas du tout ce que tu obtiendras au final et que les navigateurs gèrent très mal, comme -autre exemple- les longues URL non tronquées sur certains blogs.

Pour cibler IE (6 et/ou 7 et/ou d'autres versions) différemment de Firefox, il est fortement conseillé d'utiliser les commentaires conditionnels (voir FAQ du Forum) plutôt qu'un hack comme celui décrit par Woulf (cela peut poser des problèmes de compatibilité maintenant ou dans le futur parce que c'est un détournement, contrairement aux commentaires conditionnels).

Salut,

La grande différence entre IE et FF c'est que l'un considère que les margin font parti de la taille de ton block, on l'occurrence ici width: 130px; height: 180px; et l'autre se dit que les margin c'est un espace qu'on ajoute en plus, donc IE croit que la hauteur total de ton block est : 180+5 et FF pense que c'est 175+5.

Voilà, j'espère que ça t'aidera.

A++

Hacken a écrit :
La grande différence entre IE et FF c'est que l'un considère que les margin font parti de la taille de ton block

Hello,

En fait ce que tu dis n'est pas exact. Les choses se passent exactement de la même manière sur FF et IE à partir du moment où le document est bien conforme.

Comme le dit Felipe, le code PHP n'est d'aucune utilité pour un problème de rendu. Il faut donner le code HTML produit (aller sur la page et consulter la source...), ou mieux encore: fournir l'adresse d'une page en ligne. La page en ligne est tout de suite plus parlante.

Woulf a écrit :
il y a souvent des differences entre IE et firefox, as tu essayer de mettre une margin plus importante avant celle d'ie avec !important a la fin (avant le ; )?

J'vens d'essayer de mettre plus de margin et j'ai constater qu'au niveau du nom il ne me met pas le margin sur le DIV nom mais sur le DIV conteneur...

Par contre entre les deux texte avec plus de margin tout ce passe bien.

Felipe a écrit :
Bonjour,

le code PHP ne nous est d'aucune malheureusement. Seul ce que reçoit le navigateur, à savoir le code HTML, est intéressant pour le rendu de la page
Aurais-tu une page en ligne ou sinon ce code HTML?

Remarque: mieux vaudrait que tu utilises du faux-texte plutôt que "aaaaaaaaaaaaaaaaaaaaaaaaaa" qui ne représente pas du tout ce que tu obtiendras au final et que les navigateurs gèrent très mal, comme -autre exemple- les longues URL non tronquées sur certains blogs.

Pour cibler IE (6 et/ou 7 et/ou d'autres versions) différemment de Firefox, il est fortement conseillé d'utiliser les commentaires conditionnels (voir FAQ du Forum) plutôt qu'un hack comme celui décrit par Woulf (cela peut poser des problèmes de compatibilité maintenant ou dans le futur parce que c'est un détournement, contrairement aux commentaires conditionnels).

J'ai changer mon texte aaaaa par du faux texte, bon j'avais fait un saut de ligne a chaque ligne, c'etait pour compter le nombre de caractere maxi que je pouvais rentrer pour gerer le maximum de caractere que l'utilisateur tape dans le textarea grace a un Javascript...

J'ai reussi a gerer le beug au niveau du nom en mettant du padding-top: 20px; au lieux de margin-top: 20px; j'utiliserai les commentaires conditionnels, par contre si j'ai bien compri faut que je crée une feuille CSS pour IE et une Firefox?

Par contre dans l'une ou l'autre configuration et les margin et padding a 0, j'ai toujours cette espace de 20px au niveau du DIV conteneur sous Opera...


J'ai pas encore mi cette partie du site en ligne, mais j'vous met le code source de la page, sans le php cette fois si...


J'met celui de Opera, je sais pas si ca joue que ce soit de celui-ci ou d'un autre???

<!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" />
<title>Document sans nom</title>
<link href="../css/page.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="conteneur">

		
        
<div id="lien_gal"><a href="../galerie/galerie.php"target="contenu" class="a">Voir la galerie</a></div><div id="texte">Les premiers instruments du facteur italien étaient construits avec des cordes fines et pour cette raison beaucoup moins sonores que les clavicordes ou les clavecins de leur temps. En deux siècles on assistera à un renversement complet du concept d'instrument à cordes frappées : faible tension des cordes, corps sonore léger et audition de la table contre forte tension des cordes, corps sonore lourd et audition de la corde. Néanmoins, comparé au clavicorde, le piano forte amélioré perme</div><div id="nom">Corine Keiflin</div><div id="statut">Trésorier(e)</div><div id="photo"><img src="../images/photo_cv/Corine Keiflin.jpg" alt="Corine Keiflin" WIDTH=130 HEIGHT="180" \></div><div id="texte2">La facture de piano-forte connut son essor durant la fin du XVIIIe siècle, avec le travail de l'école viennoise, comptant parmi ses membres Johann Andreas Stein et sa fille Nannette Stein ainsi qu'Anton Walter. Les pianos de style « viennois » étaient fabriqués sans cadre avec seulement un barrage en bois, deux cordes par note, et des marteaux recouverts de cuir. C'est pour des instruments de ce type que sont écrits les concertos et sonates de Mozart. Cet instrument avait un son plus doux et plus clair que celui des pianos modernes, et permettait aussi de tenir les notes plus longtemps. Au fur et à mesure de cette évolution, jouer du piano devint de plus en plus fatigant, la force nécessaire pour enfoncer les touches ainsi que la co</div>
		
		
</div>

</body>

</html

Merci d'avance!!!