Page 1 sur 1

Perte de style dans <UL>

Publié : 27 févr. 2008, 14:10
par Jean-Pierre DUVAL
Bonjour.

Il y a une différence entre FireFox (incorrect) et Opéra ou IE (corrects tous les deux) concernant le bout de code suivant.
1) FireFox ne propage pas le style de <CODE> dans <UL>. Celui-ci bascule de Courrier New à Arial.
2) Le style après </UL> dans <CODE> ne revient pas à Courrier New. Il reste à Arial.

HTML :
------
<HTML>
...
<CODE>
<B>Variable</B><BR>
<I>/******/</I>
<UL>
E :<B>Nul Ou</B> EchangeUps5GL;<BR>
F : <B>Nul Ou</B> IFlux;<BR>
</UL>
<BR>
<B>Principal</B><BR>
<I>/*******/</I><BR>
<B>Variable</B><BR>
<I>/******/</I>
<UL>
A : Caractere;<BR>
B : Entier;<BR>
C : Reel;<BR>
D : Booleen;<BR>
</UL>
<BR>
<B>Debut</B><BR>
...
</CODE>
...
</HTML>

CSS :
-----
B { font-family: Courier New; font-size: 10pt; font-style: normal; font-weight: bold; text-decoration:none; color:#000000 }
BODY { font-family: Arial; font-size: 10pt; font-style: normal; text-decoration:none; color:#000000 }
CODE { font-family: Courier New; font-size: 10pt; font-style: normal; font-weight:normal; text-decoration:none; color:#000000 }

Merci pour votre aide.

Publié : 27 févr. 2008, 14:58
par teoli2003
Le html est d'UL est incorrect: il doit y avoir des li dedans.

Publié : 27 févr. 2008, 15:30
par Asumbaa
Salut,

* Tu ne peux pas mettre de UL dans tes CODE (qui ne doit recevoir que des éléments de type en ligne, étant lui-même en ligne)

* Dans ta CSS, pour un nom de police avec plusieurs morceaux comme Courier New, il faut encadrer avec des guillemets :

Code : Tout sélectionner

font-family: "Courier New";

Quelques explications supplémentaires

Publié : 27 févr. 2008, 16:37
par Jean-Pierre DUVAL
Ok pour les guillemets manquant autour de Courier New.
Toutefois, le vrai séparateur est le point-virgule ou l'accolade, donc inutile, sauf si le nom de police comporte justement un point-virgule ou une accolade. Ce qui n'arrive jamais...

En revanche, pour le UL :
1) Si le <UL> ne contient pas de <LI>, il s'agit tout simplement de faire une identation d'une partie du <CODE> à la manière d'une tabulation. La méthode que j'ai trouvée est d'imbriquer les <UL>, un par niveau de tabulation. Voici peu ou prou le résultat attendu avec \t symbolisant une tabulation large de trois caractères :

Variable
/******/
\tE : Nul Ou EchangeUps5GL;
\tF : Nul Ou IFlux;

Principal
/*******/
Variable
/******/
\tA : Caractere;
\tB : Entier;
\tC : Reel;
\tD : Booleen;

Debut
...

2) L'affichage est correct sur IE, Opéra, Safari, etc. sauf sur FireFox qui perd le style en cours de route. En fait, il utilise le style de <BODY> et non celui de <CODE> en début de <UL> quand aucun style n'est précisé ou en sortie de <UL> quand un style est précisé.

3) Si quelqu'un sait corriger ce bug de FireFox, je suis preneur.

4) Si quelqu'un à une meilleure idée pour faire une identation comme expliqué ci-dessus, je suis aussi preneur.

JPD.

Re: Perte de style dans <UL>

Publié : 27 févr. 2008, 18:01
par calimo
Jean-Pierre DUVAL a écrit : 2) Le style après </UL> dans <CODE> ne revient pas à Courrier New. Il reste à Arial.
En fait c'est parfaitement normal :wink:

<code> ne peut pas contenir <ul> comme l'a dit Asumbaa. Firefox ferme donc implicitement la balise code avant de commencer <ul>. Il n'y a pas de comportement correct/incorrect : c'est le code qui est incorrect, les navigateurs, ne sachant pas que faire (car la gestion des erreur n'est spécifiée nulle part), font chacun ce qu'ils semblent être le mieux (ou plutôt le moins pire). Pas de bol, ça ne t'arrange pas.

La solution est de passer par les standards. Les respecter scrupuleusement permet aux navigateurs de rester dans le domaine de ce qui est spécifié, donc ne laissant pas la place à l'interprétation personnelle du navigateur. Et là pas de miracles, il va falloir potasser. Le validateur en particulier sera ton ami : http://validator.w3.org/ :D

Quelques liens utiles :
http://www.tuteurs.ens.fr/internet/web/html/
http://www.siteduzero.com/tuto-3-6-0-ap ... e-web.html
Et finalement quelques articles d'openweb qui résument bien le problème je crois : En l'occurence, l'élément code étant de type en-ligne, il faudra plutôt utiliser son équivalent de type block : pre. Mais je doute que ce soit pertinent.

PS : c'est ton site on dirait, donc c'est du développement web :wink:
http://www.geckozone.org/forum/viewforum.php?f=8

Résolu

Publié : 27 févr. 2008, 19:50
par Invité
1) Mea culpa. Je pensais que CODE était en mode bloc. Après vérification de la documentation du W3C, il est (curieusement selon moi) en mode ligne.

2) J'ai essayé d'autres balises en mode bloc. D'un navigateur à l'autre, le résultat est franchement différent (ADDRESS, BLOCKQUOTE, DIV, PRE, etc). Rien ne fonctionne "correctement" i.e. juste tenir compte du style que j'impose, tout simplement.

3) La solution que j'ai trouvée est la suivante :
- Les 16 000 sources Html reste avec <CODE>. Ouf.
- Si le navigateur est IE, Opéra ou Safari. On ne change rien.
- Si le navigateur est FireFox ou NetScape, substitution par du JavaScript dans document.innerHTML de <CODE> par <DIV class="Code"> et </CODE> par </DIV>.
En ce cas, le résultat est à peu près identique. Léger défaut d'interligne non résolu.

Merci pour votre aide.

PS : Il s'agit effectivement de formater correctement la documentation de la version 4.0.0 d'Up ! Application System, afin que cela soit agréable pour les utilisateurs de Fire Fox. Cf www.up-comp.com pour les curieux.

Re: Perte de style dans <UL>

Publié : 03 mars 2008, 17:13
par Bidouille
calimo a écrit :PS : c'est ton site on dirait, donc c'est du développement web
Sujet déplacé !