Perte de style dans <UL>

Jean-Pierre DUVAL · Message par **Jean-Pierre DUVAL** » 27 févr. 2008, 14:10

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>
Variable 
/******/
<UL>
E :Nul Ou EchangeUps5GL; 
F : Nul Ou IFlux; 
</UL>
 
Principal 
/*******/ 
Variable 
/******/
<UL>
A : Caractere; 
B : Entier; 
C : Reel; 
D : Booleen; 
</UL>
 
Debut 
...
</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.

teoli2003 · Message par **teoli2003** » 27 févr. 2008, 14:58

Le html est d'UL est incorrect: il doit y avoir des li dedans.

Asumbaa · Message par **Asumbaa** » 27 févr. 2008, 15:30

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";

Jean-Pierre DUVAL · Message par **Jean-Pierre DUVAL** » 27 févr. 2008, 16:37

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.

calimo · Message par **calimo** » 27 févr. 2008, 18:01

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

<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/

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

http://www.geckozone.org/forum/viewforum.php?f=8

Invité · Message par **Invité** » 27 févr. 2008, 19:50

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.

Bidouille · Message par **Bidouille** » 03 mars 2008, 17:13

calimo a écrit :PS : c'est ton site on dirait, donc c'est du développement web

Sujet déplacé !

Geckozone

Perte de style dans <UL>

Perte de style dans <UL>

Quelques explications supplémentaires

Re: Perte de style dans <UL>

Résolu

Re: Perte de style dans <UL>

Qui est en ligne ?