5568 sujets

Sémantique web et HTML

Pourquoi XHTML n'aime pas Javascript ?

Bonjour à tous,

Je savais pas trop où poster ce message car mon problème concerne à la fois le XHTML et le javascript.

Pour le développement de mon site (XHTML/CSS), j'utilise du javascript afin d'afficher un texte défilant.
Sous firefox, pas de problème tout marche bien mais sous IE ca pose problème (étonnant?). En effet, mon texte ne reste pas dans son cadre.

Après quelques recherches, j'ai remarqué que si je modifiais mon entete de page par uniquement le balise <html> le texte défilait correctement dans le cadre et je ne comprend pas pourquoi.

Voici plusieurs code pour eclaircir tout cela.

L'entete de page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">


Le script Javscript :

<script language="javascript" type="text/javascript">

var t;//on declare le timer
function bBouge()
{
var texte_defilant=document.getElementById('texte_defilant');//ion recupere la balise qui a pour id "texte_defilant"

var pxLeft=texte_defilant.style.left.replace('px','');//on recupere le chiffre ( sans le px a la fin )

var taille_texte=texte_defilant.offsetWidth;//offsetWidth c'est la taille du div.

var screenW=document.getElementById('slogan').offsetWidth;//taille de la balise <div> qui contient le msg defilant

if(pxLeft==0-taille_texte)//si les pixels sont arrivés par rapport au bord gauche a la taille du texte ( donnera donc une position negative, du genre -100 )

pxLeft=screenW;//on remet le texte a la fin ( tout a droite )

else
pxLeft--;//on baisse les pixels ( ce qui provoque le decalage vers la gauche)

texte_defilant.style.left=pxLeft+"px";//on attribue la nouvelle position au texte

t=setTimeout('bBouge();',25);//toute les 0.010 secondes on rappele la fonction a l'infini ( recursivement )

}

onload=function(){

document.getElementById('texte_defilant').style.left=document.getElementById('slogan').offsetWidth+'px';

t=setTimeout('bBouge();',25);

}
</script>


Le morceau de code correspondant au texte défilant :

	<div id="slogan" onmouseover="clearTimeout(t);" onmouseout="bBouge()">
<span id="texte_defilant">
Utiliser le <a class="a2" href="pack.php">pack graphique</a> vous permet d'afficher toutes les pages du site plus rapidement ; en <a class="a2" href="pack.php">savoir plus</a>.
</span>
</div>


Le CSS correspondant à tout cela :

#slogan {
	height: 20px;
	width: 738px;
	margin: 3px 3px 5px 3px;
	background-color: #7791A2;
	border: 1px solid #5A5D57;
	line-height: 12px;
	text-indent: 5px;
	overflow: hidden;
}
#texte_defilant{
	position: relative;
}


Pour ceux qui aurait besoin d'une visualisation, voici à quoi ressemble le site : Pragmatus.
La page n'est pas à jour, elle ne contient pas les code ci-dessus mais c'est juste pour ceux qui veulent une visualisation. (Qui a dit il en profite pour faire de la pub ? Smiley lol )

Donc voila j'espère que quelqu'un pourra m'aider.

Apparement le problème ne vient pas du Javascript mais bien du fait que avec IE le XHTML n'aime pas le Javascript.

Je suis preneur de tout élément de solutions.

Merci.
LoK
LoK a écrit :
Apparement le problème ne vient pas du Javascript mais bien du fait que avec IE le XHTML n'aime pas le Javascript.

Ça vient surtout du fait qu'IE gère mal (voire pas) la propriété CSS overflow: hidden;
Bonjour à tous,

Je mets mon casque et j'y vais.
Pour régler le problème que tu évoques, j'utilise une balise html non W3C mais reconnue par Firefox.

<marquee behavior="scroll" direction="left" 
scrollamount="1" scrolldelay="30" height="300" 
align="center" truespeed onmouseover="this.stop()" 
onmouseout="this.start()">
<p>le texte à faire défiler, stylé comme tu veux, avec
 des liens, des images et tuti quanti</p>
</marquee>


Si javascript est désactivé, il ne s'arrête pas au mouseover mais il s'affiche. Et sur les navigateurs texte, le texte contenu dans le marquee est affiché car c'est un paragraphe.

Mais ce n'est pas conforme aux standards. Faire une recherche sur MSDN pour l'aide.
Modifié par papyjo (14 Jun 2005 - 07:06)
Je connait la balise <marquee> mais je ne souhaitent pas l'utiliser car elle n'est pas conforme à la W3C.

Aparament, ca vient du "overflow: hidden;", je vais chercher de ce coté pour tenter de résoudre le problème.
Il te reste la solution super simple d'écrire ton DTD au lieu d'utiliser celui du w3c... comment ça je sors ? ;oD
Sujet clos
Aller à