doctype XHTML et Mozilla

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Répondre
carenthir
Salamandre
Messages : 43
Inscription : 13 août 2003, 09:35

doctype XHTML et Mozilla

Message par carenthir »

bonjour chers collègues,

voilà, je veux faire comme les grands et ne plus développer qu'en XHTML ( transitional pour l'instant quand même ... )
Je souhaite intégrer un texte déroulant, dont voici le code ( c'est un fichier html tout prêt )

------------------------------------------------

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<title>test scroll</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
	body { text-align: left; font-size: 16px; margin: 2ex; color: #000000; background-color:#88DD88; font-family: verdana, sans, arial, helvetica, sans-serif;}
	.scroll { font-size:14px; font-family:Arial; color:#FFFFFF;}
</style>
</head>

<body>

<script language="JavaScript1.2" type="text/javascript">
<!--
scroll_largeur = 200;
scroll_hauteur = 90;
scroll_bgcolor = '';
scroll_pause_seconde = 2;
scroll_mode =1;
scroll_actuel = 0;

scroll_article = new Array;

scroll_article[0]="<strong>Mon premier paragraphe<\/strong><br \/>xxxxxxxxxxxxxxxx xxxxx x xxxx xxxxx xxxxxxxxxx xxxxxxx ...<br \/>";
scroll_article[1]="<strong>Mon deuxième paragraphe<\/strong><br \/>yyyyy yyyyy y yyyyyyyyyy yy yyyyyyyyy yyyy yyyyyyy yy yyyyyyyy...<br \/>";
scroll_article[2]="<strong>Mon troisième paragraphe<\/strong><br \/>zzzzzzz zzzzzzz zz zzzzzzzz zzz zzzzzzzzz z zzzzzzzz z ...<br \/>";

function d(texte){
 document.write(texte);
}

function scroll_start()	{
 if(scroll_mode == 1){
  scroller_haut = "s_articles_1";
  scroller_bas = "s_articles_2";
  scroll_mode = 0;
 }else{
  scroller_bas = "s_articles_1";
  scroller_haut = "s_articles_2";
  scroll_mode = 1;
 }
 scroll_nb_message = scroll_article.length-1;
 if(scroll_actuel == scroll_nb_message){
  scroll_suivant = 0;
 }else{
  scroll_suivant = scroll_actuel+1;
 }
 if(document.getElementById)
  document.getElementById(scroller_bas).innerHTML = scroll_article[scroll_suivant];
 scroll_top = 0;
 if(document.getElementById)
  setTimeout("scroll_action()",scroll_pause_seconde*1000)
}

function scroll_action(){
 scroll_top -= 1;
 document.getElementById(scroller_haut).style.top = scroll_top;
 document.getElementById(scroller_bas).style.top = scroll_top+scroll_hauteur;
 if((scroll_top+scroll_hauteur) > 0){
  setTimeout("scroll_action()",10)
 }else{
  scroll_stop()
 }
}

function scroll_stop(){
 scroll_actuel = scroll_suivant;
 scroll_start()
}
	
d('<div id="scroll_relativ" style="position:relative;width:'+scroll_largeur+';height:'+scroll_hauteur+';background-color:'+scroll_bgcolor+'">');
d('<div id="scroll_cadre" style="position:absolute;width:'+(scroll_largeur-8)+';height:'+(scroll_hauteur-8)+';top:4;left:4;clip:rect(0 '+(scroll_largeur-8)+' '+(scroll_hauteur-8)+' 0)">');
d('<div id="s_articles_1" style="position:absolute;width:'+(scroll_largeur-8)+';left:0;top:0;" class="scroll">'+scroll_article[0]+'<\/div>');
d('<div id="s_articles_2" style="position:absolute;width:'+(scroll_largeur-8)+';left:0;top:'+scroll_hauteur+';" class="scroll">'+scroll_article[1]+'<\/div>');
d('<\/div><\/div>');
window.onload = scroll_start;
-->
</script>

</body>
</html>
--------------------------------------------------------------------------------

Notez que le code VALIDE en XHTML 1.0 trans.
Dans Moz ( Firebird 6.0.1 ) ça affiche un charabia incompréhensible.
Dans IE 5.5 ( bon OK c'est un mauvais exemple ;-) ) ça marche au poil

Et maintenant le plus fort: supprimez le doctype, et Mozilla l'affiche parfaitement !!! Alors que le document est censé être valide !

une idée ?
Dernière modification par carenthir le 27 août 2003, 14:42, modifié 1 fois.
- Avant, on avançait dans la mauvaise direction
Maintenant, on recule dans la bonne -
Benoit
Administrateur
Messages : 4894
Inscription : 19 juil. 2003, 10:59

Message par Benoit »

M'a l'air bien compliqué tout ça... <troll>tu peux pas utiliser marquee?</troll>

Il faudrait voir si ta console JavaScript n'affiche pas d'erreurs.

Mais sinon pour que ce soit lisible et débuggable, tu devrais complètement séparer ton script de ton contenu de la manière suivante:

- mettre les fonctions (à part la fonction d qui ne sert à rien) dans un tag script dans head et non dans body.
- remplacer les variables largeur, hauteur, et en général tout ce qui est dans tes attributs style par une vraie utilisation des CSS
- remplacer la série d'appels à "d" (qui ne fait rien d'autre que des document.write!) par le code html tout simplement.

En ce qui concerne tes "scroll_article[machin]", si tu as besoin de les modifier, au lieu de les définir dans le script, tu peux les mettre directement dans le code html et y accéder via le DOM (en remplaçant le tableau par une fonction qui parcourt les div et qui récupère leur contenu par exemple)

Et puis surtout ça te permettra d'avoir un contenu lisible même quand javascript est désactivé.
ericj
Lézard vert
Messages : 156
Inscription : 15 juin 2003, 22:22

Message par ericj »

Ce source ne pose apparemment aucun pb ni avec Mozilla 1.4 FR ni avec Firebird 0.6.1 sur XP. Assurément, aucun charabia.
mat
g3ck0m4st3r
Messages : 57
Inscription : 31 juil. 2003, 04:02

Message par mat »

Il en pose ici, et c'est pas vraiment etonnant.
Passons sur le innerHTML, sur le document.write et autres trucs horribles, ce qui fait tout deconner, c'est que tu utilises des tailles sans unités.
genre top:4 ... 4 quoi... choux ? carottes ? elephants ? le navigateur ne sait pas. cette bouse de IE considere que c'est des px, mais mozilla, mis en mode strict a cause du doctype xhtml, considere que c'est du charabia, et mozilla a raison.

Suffit donc, a chaque fois que dans ton CSS ou ton js, tu utilises des tailles, tu mettes "px" derriere. Apres ca marche impec.
carenthir
Salamandre
Messages : 43
Inscription : 13 août 2003, 09:35

Message par carenthir »

effectivement, je sais pas trop où j'avais la tête au moment où j'ai pondu cette infamie ( dans le ...knuut... sans doute )
merci bcp pour vos éclaircissements, surtout Mat, la prochaine fois j'essaierai de plus coder comme un goret dès le début :wink:
et d'appliquer les conseils de Benoit aussi
- Avant, on avançait dans la mauvaise direction
Maintenant, on recule dans la bonne -
Snap
Lézard à collerette
Messages : 362
Inscription : 04 juil. 2003, 17:15

Message par Snap »

Je sais pas si ca vous gene, mais moi si :)

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<title>test scroll</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { text-align: left; font-size: 16px; margin: 2ex; color: #000000; background-color:#88DD88; font-family: verdana, sans, arial, helvetica, sans-serif;}
.scroll { font-size:14px; font-family:Arial; color:#FFFFFF;}
</style>
</head>

<body>

<script language="JavaScript1.2" type="text/javascript">
<!--
scroll_largeur = 200;
scroll_hauteur = 90;
scroll_bgcolor = '';
scroll_pause_seconde = 2;
scroll_mode =1;
scroll_actuel = 0;

scroll_article = new Array;

scroll_article[0]="<strong>Mon premier paragraphe<\/strong><br \/>xxxxxxxxxxxxxxxx xxxxx x xxxx xxxxx xxxxxxxxxx xxxxxxx ...<br \/>";
scroll_article[1]="<strong>Mon deuxième paragraphe<\/strong><br \/>yyyyy yyyyy y yyyyyyyyyy yy yyyyyyyyy yyyy yyyyyyy yy yyyyyyyy...<br \/>";
scroll_article[2]="<strong>Mon troisième paragraphe<\/strong><br \/>zzzzzzz zzzzzzz zz zzzzzzzz zzz zzzzzzzzz z zzzzzzzz z ...<br \/>";

function d(texte){
document.write(texte);
}

function scroll_start() {
if(scroll_mode == 1){
scroller_haut = "s_articles_1";
scroller_bas = "s_articles_2";
scroll_mode = 0;
}else{
scroller_bas = "s_articles_1";
scroller_haut = "s_articles_2";
scroll_mode = 1;
}
scroll_nb_message = scroll_article.length-1;
if(scroll_actuel == scroll_nb_message){
scroll_suivant = 0;
}else{
scroll_suivant = scroll_actuel+1;
}
if(document.getElementById)
document.getElementById(scroller_bas).innerHTML = scroll_article[scroll_suivant];
scroll_top = 0;
if(document.getElementById)
setTimeout("scroll_action()",scroll_pause_seconde*1000)
}

function scroll_action(){
scroll_top -= 1;
document.getElementById(scroller_haut).style.top = scroll_top;
document.getElementById(scroller_bas).style.top = scroll_top+scroll_hauteur;
if((scroll_top+scroll_hauteur) > 0){
setTimeout("scroll_action()",10)
}else{
scroll_stop()
}
}

function scroll_stop(){
scroll_actuel = scroll_suivant;
scroll_start()
}

d('<div id="scroll_relativ" style="position:relative;width:'+scroll_largeur+';height:'+scroll_hauteur+';background-color:'+scroll_bgcolor+'">');
d('<div id="scroll_cadre" style="position:absolute;width:'+(scroll_largeur-8)+';height:'+(scroll_hauteur-8)+';top:4;left:4;clip:rect(0 '+(scroll_largeur-8)+' '+(scroll_hauteur-8)+' 0)">');
d('<div id="s_articles_1" style="position:absolute;width:'+(scroll_largeur-8)+';left:0;top:0;" class="scroll">'+scroll_article[0]+'<\/div>');
d('<div id="s_articles_2" style="position:absolute;width:'+(scroll_largeur-8)+';left:0;top:'+scroll_hauteur+';" class="scroll">'+scroll_article[1]+'<\/div>');
d('<\/div><\/div>');
window.onload = scroll_start;
-->
</script>

</body>
</html> 
Pour le reste, je verrais après :D
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Snap
Bobe
Iguane
Messages : 742
Inscription : 28 juil. 2003, 21:29

Message par Bobe »

les internautes qui n'ont pas javascript, ou qui l'ont désactivé, ne verront rien. (13% des internautes sont dans ce cas de figure d'après les dernières statistiques)
« La vie d’un geek est un combat perpétuel contre l’imperfection »
Snap
Lézard à collerette
Messages : 362
Inscription : 04 juil. 2003, 17:15

Message par Snap »

13%.. c'est quelle source ? Ca fait beaucoup je trouve ! Enfin, c'est pas négligeable. Ceux qui désactivent le JavaScript volontairement sont paranos et mal informés je pense.. Le JS est très pratique s'il n'est pas utilisé pour des co*****es (images qui suivent le curseur, détection barbare du navigateur..).
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Snap
Avatar de l’utilisateur
pascal
Administrateur
Messages : 1414
Inscription : 28 juil. 2003, 15:13

Message par pascal »

Tu as aussi des entreprises où le javascript est désactivé par le service informatique pour des raisons de sécurité, si ta boîte fait ça et qu'elle emploie 100.000 personnes ça chiffre vite
Snap
Lézard à collerette
Messages : 362
Inscription : 04 juil. 2003, 17:15

Message par Snap »

Ouais forcément :(
En parlant de désactivation de JS, mon IE a pété les plombs et (j'ai vérifié dans les params de sécurité) il n'exécute pas une seule ligne de JavaScript !
Sous XP SP1a, la "désinstallation" d'IE ajoute l'atribut fichier caché au programme iexplore.exe et le considère comme désactivé (depuis le SP1). Bravo Bill ! Pas moyen pour moi de réinstaller IE donc :(
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Snap
Romuald
Gecko
Messages : 88
Inscription : 03 sept. 2003, 23:55

Message par Romuald »

Snap a écrit :Ouais forcément :(
En parlant de désactivation de JS, mon IE a pété les plombs et (j'ai vérifié dans les params de sécurité) il n'exécute pas une seule ligne de JavaScript !
Sous XP SP1a, la "désinstallation" d'IE ajoute l'atribut fichier caché au programme iexplore.exe et le considère comme désactivé (depuis le SP1). Bravo Bill ! Pas moyen pour moi de réinstaller IE donc :(
Pour réinstaller IE ou les autres bordel de windows comme outlock etc: http://www.generation-nt.com/index.php? ... uces&id=90

Puis après pour télécharger IE: http://www.generation-nt.com/index.php? ... uces&id=65
Nul besoin d'être comme son voisin pour l'apprécier, c'est la différence qui fait que le monde est intéressant.
Voyons plus loin que le bout de notre nez.
SIBELIUS
Lézard vert
Messages : 146
Inscription : 09 sept. 2003, 23:21

Message par SIBELIUS »

Snap a écrit :13%.. c'est quelle source ? Ca fait beaucoup je trouve ! Enfin, c'est pas négligeable. .
Selon cette source par ex : http://www.w3schools.com/browsers/browsers_stats.asp
Tutoriels et blog (X)HTML / CSS : css.alsacreations.com
Forum Standards / CSS : forum.alsacreations.com
Nucleos
Lézard à collerette
Messages : 282
Inscription : 04 juil. 2003, 17:04

:)

Message par Nucleos »

la bonne source !! :)

J'ai eu du mal à trouver ce lien quand même, c saoûlant de pas le trouver quand tu veux faire du prosélytisme... :idea:
« La clarté est la politesse des professeurs. » (E. Gerurez)
... Posons de bonnes questions !
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 14 invités