Obtenir le même résultat sous FF et IE

[diaboloche]

Bonjour à tous !
Voici mon problème...

FF :


IE :



Le résultat souhaité est comme sous FF...

Voici le code php :

Code : Tout sélectionner

while ( $resultat = mysql_fetch_array($req)) //--- Retourne une ligne de résultat sous la forme d'un tableau associatif---//
{
 print("<h1><a style=\"color:WHITE\" href=\"#".$resultat[0]."\"> <font face=\"Arial\">".$resultat[2]."</font></a>");
 print("&nbsp;&nbsp;&nbsp;&nbsp;<font color=\"WHITE\" size=\"-2\"><em> - News écrite par ".$resultat[4]." le ".$resultat[1]." à ".$resultat[5]."</em></font></h1><hr class=\"hr2\"><hr class=\"hr3\">");
}

Et le code CSS :

Code : Tout sélectionner

hr { /*Ligne rouge*/
 display:block;
 height: 1px;
 margin: 0;
 margin: auto;
 padding:0;
  _margin: -7px 0;
  color: #FF0000;
  background-color: #FF0000;
  border:0;
  width: 690px;  
  align: center;
 }
 
 .hr3 { /*Ligne rouge*/
   width: 724px;  
 }
 
 .hr2 /* Grande Ligne noir*/
 {
 color: BLACK;
 background-color: BLACK;
 width: 724px; 
 }
 
  .hr4 /* Petite Ligne noir*/
 {
 color: BLACK;
 background-color: BLACK;
 width: 690px; 
 }

Si quelqu'un peut m'aider... parce que je suis vraiment bloqué.

Bonne journée.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7

[calimo]

Voici le code php :

Le navigateur reçoit du HTML. Le php n'est donc pas utile pour nous ici.
Quel est le code HTML ?

À mon avis, tu n'as pas besoin de <hr/>. Joue simplement avec les bordures des éléments autour

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7

[diaboloche]

Voici le code html si cela vous semble plus claire

Code : Tout sélectionner

<h1><< DERNIERES NEWS >></h1><hr class="hr2"><hr class="hr3">  

Oui peut être qu'on peut changer le système et ne plus utiliser des <hr>... mais si il y a moyen de modifier le CSS pour que cela fonctionne cela m'éviterais de devoir changer plusieurs pages.

[/code]

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7

[teoli2003]

Ton code est codé comment en HTML4 strict, en XHTML1.0? Quelle DTD as-tu choisis?

[diaboloche]

Ton code est codé comment en HTML4 strict, en XHTML1.0? Quelle DTD as-tu choisis?

Euh du simple HTML.... donc pas besoin de DTD

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7

[Benoit]

Euh du simple HTML.... donc pas besoin de DTD

Qu'est-ce que tu veux dire par là ? Il y a une DTD différente pour chaque version de HTML.

Mais je ne crois pas que ce soit ce que voulait vraiment demander teoli2003
Il voulait à mon avis savoir quel doctype tu avais choisi, parce que ça a une influence sur la manière dont ta page sera interprétée (mode standards ou quirks).

[Wronschien]

pas besoin de DTD

oulà j'espère que t'as une bonne armure paske là tu vas prendre cher

bon je plaisante mais sans dtd tu pars très mal pour pouvoir avoir la même chose partout...

edit: tiens, grillé...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.0; fr; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7

[Invité]

pas besoin de DTD

oulà j'espère que t'as une bonne armure paske là tu vas prendre cher

bon je plaisante mais sans dtd tu pars très mal pour pouvoir avoir la même chose partout...

edit: tiens, grillé...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.0; fr; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7

Ok... je n'ai jamais utilisé que des DTD lorsque je produisais des *.XML.
Enfin sinon je suis en HTML 4.01...
Je vois pas trop quoi dire d'autre

[gcyrillus]

bonjour,

tu utilise le display block et margin -7px 0 pour reduire l'epaisseur de ton hr dans IE, mais pour l'ecraser sur lui même il a besoin d'une marge a -14px.
ou 1 em selon le codage de ta page , enfin pas si simple que ça et ça depend de ce qu'il y a autour , il ne s'agipas non plus de remonter sur le texte :

j'avais fait quelques essai il y a quelque temps , voici le code de la page test:

Code : Tout sélectionner

<html>
<title>test hr IE/FF</title>
<head>
<style type='text/css'>
hr {
	border:0;
	margin:auto;
	_margin:-0.5em auto -0.9em auto;
	_display:block;
	width:90%;
}
body {
font-size:100%; /* permettrait d'user du em en marge sur le hr */
}
/* convient a IE mais pas les gecko .o {color:red;} .a {color:yellow;} .b {color:green;} .c {color:blue;margin-bottom:-0.5em;} */
/* convient aux deux */

.o {
	border-top:2px solid red;
}
.a {
	border-top:2px solid yellow;
}
.b {
	border-top:2px solid green;
}
.c {
	border-top:2px solid blue;
	margin-bottom:0.1em;
	_margin-bottom:-0.5em;
}
</style>

</head>
<body>
<div>	 Zone ou section	</div>
<div>
<hr class="o" />
<hr class="a"/>
<hr class="b"/>
<hr class="c"/>
	 Zone ou section	</div>
</body>
</html>

Voila si cela peut de donner une piste supplementaire et te permettre de fignoler tes reglages "css".

GC.


<edit> Il est peut-etre avantageux d'elimeiner les hr et d'appliquer des bordures hautes/basses a h1 ? genre border-bottom:2px ridge red;</>

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

[Mongo Bob]

À mon avis, tu n'as pas besoin de <hr/>. Joue simplement avec les bordures des éléments autour Clin d'oeil

Il est peut-etre avantageux d'elimeiner les hr et d'appliquer des bordures hautes/basses a h1 ? genre border-bottom:2px ridge red;

+1, et ça commence à faire beaucoup d'avis en faveur des bordures, <hr> n'est pas justifié ici.