La balise <hr> bug sur phpbb

[El tronchodiablo]

Boujours à tous
pendant les vancances je me suis amusé à créer un template pour phpbb, or il semble que la balise <hr> bug sous firefox

en effet au lieu d'afficher une ligne, elle affiche un gros carré et c'est très moche...
(comme vous pourrez le constater ici)

pourtant elle codée comme ça :

Code : Tout sélectionner

<hr width="100%" size=1>

donc je ne vois pas pourquoi ça marche sous IE et pas firefox...

[calimo]

Bon, si je regarde dans ton code tes balises sont <hr /> (rq : en HTML c'est simplement <hr> hein ? )

Si je regarde dans ta feuille de style, je vois

Code : Tout sélectionner

hr{border:0px solid #000000; border-top-width:500px; height:0px}

border-top-width:500px
Donc pour moi ça me semble tout à fait normal que Firefox affiche une grosse bordure de 500px, vu qu'en plus tu as mis "solid #000000;"
Mets une taille de bordure un peu plus raisonnable

La vraie question à se poser est donc : pourquoi est-ce que cette daube d'IE n'a pas appliqué ce style ? En tous cas il aurait du s'il avait été un bon navigateur

[El tronchodiablo]

lol en effet y a un bug sur la feuille de style =)

pour le <hr/> j'avais re essayé en local sans changement, c'est pour ça que je l'ai mis comme ça (<hr>) dans le post.

Juste un dernier truc : comment tu expliques que sous IE il m'affiche une ligne tout à fait normale, et que donc je n'ai rien remarqué jusqu'à ce qu'un ami me le sigale ?

(il ne reste pas moins que je vais de ce pas corriger cette feuille de style ^^)

[El tronchodiablo]

bon, même après correction faite, je ne vois aucun changement sous firefox...

j'ai modifié la feuille de style en :

Code : Tout sélectionner

hr{border:0px solid #000000;}

et la balise dans le viewtopic_body.tpl en

Code : Tout sélectionner

<hr width="100%" size=1>

sous IE il m'affiche maintenant un ligne beige claire et sous firefox le même carré noir....

---> edit après avoir actualisé en vidant le cache : il ne m'affiche plus de ligne du tout, ce qui est un moindre mal, mais toujours pas le bon résultat

[calimo]

Cela s'explique tout simplement par le fait que le moteur d'IE n'a pas été touché depuis 2001 (et encore : 1999 !), c'est donc une éternité, à cette époque les CSS en étaient à leurs balbutiements, et IE n'a plus évolué depuis (et il n'est malheureusement pas près de le faire ), donc il a conservé ces bugs et ses implémentations parfois bizarre des standards.

Par exemple, si tu utilise la propriété CSS height, IE l'applique en fait comme si c'était un min-height (hauteur minimale), et je te laisse donc imaginer les problèmes que ça peut causer.

Il y a plein d'exemples de ce type. C'est pour cela qu'il est conseillé généralement de développer ses sites dans un navigateur plus respectueux des standards, pour éviter de faire des erreurs de ce style, et après il est beaucoup plus simple de corriger les choses dans ce sens que dans l'autre.

Question développement web, IE est à bannir absolument pour ce genre de raisons.

Effectivement c'est nettement mieux comme ça

[El tronchodiablo]

Cela s'explique tout simplement par le fait que le moteur d'IE n'a pas été touché depuis 2001 (et encore : 1999 !), c'est donc une éternité, à cette époque les CSS en étaient à leurs balbutiements, et IE n'a plus évolué depuis (et il n'est malheureusement pas près de le faire ), donc il a conservé ces bugs et ses implémentations parfois bizarre des standards.

Par exemple, si tu utilise la propriété CSS height, IE l'applique en fait comme si c'était un min-height (hauteur minimale), et je te laisse donc imaginer les problèmes que ça peut causer.

/me s'en va lire la doc de firefox

[calimo]

Code : Tout sélectionner

hr{border:0; height:1px; color:...; background-color:...; width:100%}

Si ta bordure est 0, c'est 0, pas besoin de mettre le "px solid #000000"
Ensuite, comme tu peux l'imaginer, l'interprétation des balises est différente dans chaque navigateur. Il faut donc fixer toutes les variables, Mozilla affichant hr par défaut par sa bordure, IE par son fond (ou sa couleur), un autre par sa couleur (ou son fond)... bref si tu veux un affichage correct partout tu dois tout définir, la bordure (border), la hauteur (height), la couleur d'arrière-plan (background-color), et peut-être aussi la couleur d'avant-plan (color), bien que je ne sois pas sur...

Tu peux également définir la largeur dans le code CSS avec la propriété width ce qui te permet de la supprimer du code HTML.

Pour le size=1... quelle taille ça définit ?

Pour actualiser, pas besoin de vider tout le cache, maintiens la touche "Maj" (ou "Shift") enfoncée et clique sur "Actualiser" dans la barre d'outils, ça devrait suffire

[calimo]

/me s'en va lire la doc de firefox

Non, pas la doc de Firefox, les standards du W3C
Faire un site "en respectant les standards" c'est justement prendre le contre-pied de ce qui a posé tant de problèmes ces dernières années, le développement "pour un navigateur spécifique". En développant conformément aux standards, tu t'assure une compatibilité avec tous les navigateurs qui les respectent (quelques adaptations sont toutefois encore nécessaire pour IE qui ne les respecte que moyennement )

C'est quand-même une meilleure perspective que de devoir développer un site par navigateur non ?

[El tronchodiablo]

Pour le size=1... quelle taille ça définit ?

http://macmicro.chez.tiscali.fr/HTM/HTM13.htm
c'est juste ce que j'avais lu ici, comme cette balise m'intriguait un peux j'ai cherché et je suis tombé là dessus.

Pour actualiser, pas besoin de vider tout le cache, maintiens la touche "Maj" (ou "Shift") enfoncée et clique sur "Actualiser" dans la barre d'outils, ça devrait suffire

c'est ce que je fais, t'en fais pas, mais jusque là toute les personnes avec qui je discutait employaient le terme vider le cache, pour actualiser avec maj, parceque pour le navigateur ça reste le même résultat, il reprend tout de 0.

Non, pas la doc de Firefox, les standards du W3C

si parceque j'avais vu un passage :"pourquoi choisir firefox "

[calimo]

http://macmicro.chez.tiscali.fr/HTM/HTM13.htm
c'est juste ce que j'avais lu ici, comme cette balise m'intriguait un peux j'ai cherché et je suis tombé là dessus.

Ah oui, tu as raison, mais tu aurais mieux fait de regarder directement les spécifications HTML pour voir que c'était un attribut déconseillé

Je pense que le problème venait justement du fait que tu avais mis border:0; dans la CSS et que cette déclaration avait priorité sur l'attribut HTML... du coup Mozilla appliquait une bordure nulle, et comme le hr est justement la bordure...

Enfin bon, l'important c'est que maintenant ça marche