Geckozone

Bonjour à tous,
Je me présente, je suis nouveau sur ce forum. J'étudie XHTML, les CSS, et je découvre depuis la version 1.4 la suite Mozilla.
J'ai un problème curieux que je souhaite vous soumettre parce que je n'y comprend fichtrement rien.
J'étudie depuis quelque temps les cours CSS d'Openweb. Et dans le cours suivant, un exemple ne fonctionne absolument pas sous Moz I.4 à 1.6 :

http://www.openweb.eu.org/articles/initiation_float/

L'exemple précis qui ne fonctionne pas est celui intitulé "Une variante du spacer : <hr />".
En essayant d'exécuter cet exemple avec HTML Kit et Moz, j'arrive au résultat suivant, qui ne correspond pas du tout à ce qui est indiqué :

Je dois indiquer que j'ai installé plusieurs versions de Moz successivement, en revenant parfois à la précédente depuis que j'ai ce problème.
Quelqu'un a une idée ? Il semble que Moz interprète mal certaines règles CSS ! Gecko serait-il abimé ?

Olivier

Oui ya comme qui dirait un pb, sur mon FBird 0.7fr l'affichage correspond à l'attente

moz1.4.1-fr, linux,.

Aucun problème de mon côté.

Il n'y a rien à faire pour réparer ça ?

Un petit patch à télécharger ?

Olivier

http://www.openweb.eu.org/articles/init ... 1.html#ex5
Avec Mozilla 1.4-fr, j'ai bien le bon résultat.

(sur ton problème, on dirais que le style CSS clear: both n'est pas pris en compte, et du coup le trait <hr> traverse la boite de droite...)

Non, je ne pense pas que ça vienne de l'attribut clear: both, parce que l'exemple précédent, qui l'utilise aussi (mais à l'intérieur d'une <div>) apparaît correctement

Olivier

Je viens de faire le test dans le Mozilla 1.2.1 Macintosh de mon boulot, et l'erreur se reproduit... ça ne viendrait donc peut-être pas de Moz, mais du code, mais je ne vois rien de suspect

Voilà le code :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Mozilla</title>
<style type="text/css">
<!-- 
.jaune {
  background-color: #ffff00;
  float: right;
  width: 100px;
  margin: 0;
}
.verte {
  background-color: #00ff00;
}
hr {
  clear: both;
} 
-->
</style>
</head>
<body>
<p class="jaune">
  Une boite jaune flottant dot&eacute;e d'un contenu plus long
</p>
<p class="verte">
  Une boite verte
  <hr />
</p>
</body>
</html>

Je ne comprends toujours pas, ça ne donne absolument pas le résultat montré dans l'exemple d'Openweb.
Si jamais vous trouvez le problème...

Olivier

Pour moi, la boite verte va dans une div.
Ce qui donne ça:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Mozilla</title>
<style type="text/css">

</style>
</head>
<body>
<div class="verte">
<p class="jaune">Une boite jaune flottant dotée d'un contenu
plus long
</p>
Une boite verte
<hr>
</div>
</body>
</html>

Par contre le float left n'est pas indispensable pour mozilla et firebird

mais pour IE6. Par contre pour IE5, même avec un float left, il me colle le texte "une boite verte" à droite sur la boite jaune

Maintenant si quelqu'un à la solution pour que le texte soit à gauche dans IE5, je serais curieuse de la connaitre

bambi a écrit :
Maintenant si quelqu'un à la solution pour que le texte soit à gauche dans IE5, je serais curieuse de la connaitre

J'ai trouvé une solution pour que l'affichage soit le même dans les 4 navigateurs (IE6 - Mozilla-FB et IE5) pour le texte dans la boite verte.

HTML <p class="text">Une boite verte </p>
CCS .text {text-align: left; margin: 0;}

Et ça marche

Merci Bambi, ça fonctionne effectivement dans une <div>

Mais je ne comprends pas pourquoi, tel qu'il est présenté sur le tutoriel d'Openweb, cet exemple n'apparaisse pas correctement chez moi.

C'est ça mon problème, et c'est ce qui m'amène à penser que le moteur gecko est peut-être abimé, et à me demander ce que je pourrais faire pour le rétablir dans son intégrité (à part un format: c bien entendu, je ne me sens pas actuellement d'entreprendre une telle opération...)

Actuellement sur ma machine, j'ai IE6, Moz 1.6a, Firebird 0.7, Netscape 7.1 et Opera 7.21.

L'exemple d'Openweb qui me turlupine ne passe correctement que dans Opera...

Olivier

Bonjour Hillrunner.
Je ne pense pas que le moteur Gecko soit en cause puisque ça ne marche pas non plus avec IE.
Il faudrait demander au rédacteur d'OpenWeb

Oui, mais comment se fait-il que l'exemple apparaisse correctement chez tout le monde SAUF chez moi ?

Je rappelle qu'il s'agit de l'exemple "une variante du spacer : <hr />" du tutoriel :

http://www.openweb.eu.org/articles/initiation_float/

Si tu veux bien, jette un oeil à la capture d'écran que je donne au début du post, tu verras que le background color vert n'englobe que la ligne de texte, et non la totalité de la <p>, ainsi que la ligne <hr />... alors que ce devrait être l'inverse.

Et toutes les personnes à qui j'ai demandé de faire le test ont un bon résultat, qui correspond à celui présenté sur le tutoriel d'Openweb...

Donc il y a bien un problème chez moi, sur ma machine ou dans mon moteur gecko, mais je voudrais bien savoir lequel

Olivier

Quand on regarde l'exemple donné, le code source du "résultat" n'est pas le code source donné :
voici le code donné

Code : Tout sélectionner

<p class="jaune">Une boîte jaune flottant doté d'un contenu plus long...</p>
<p class="verte">Une boîte verte
<hr>
</p>

voila celui du résultat

Code : Tout sélectionner

<div class="verte5">
<p class="jaune5">Une boîte jaune flottant doté d'un contenu plus long...</p>
<p>Une boîte verte</p>
<hr class="spacer">
</div>

Il y a bien une div. Ce qui expliquerait les différences que tu as eu en executant le code donné...
Ton moteur gecko va mieux du coup

Oui Lezeus

Je débute en CSS mais de toute façon, je ne vois pas comment ça pourrait fonctionner sans div.
Ce serait donc une erreur d'Open Web !! Tu peux être rassuré hillrunner.
En même temps, ça fait travailler les méninges

N'est-ce pas

Je débute aussi

C'est le rendez-vous.
Mais faut bien s'entraider ou on arrivera à rien. L'union fait la force

Geckozone

Gecko abimé ?

Gecko abimé ?