[Résolu] Gros Probleme de detection des CSS

Bonjour à tous,
Je vais faire simple. J'ai un site dans lequel j'ai un javascript qui détecte une CSS pour IE et une CSS pour Firefox. Sur mon site j'ai fais 2 style CSS de couleur différente du site et pour les 2 navigateurs.

Donc :
Navigateur
- IndexIe.css
- Index.css (firefox)
Couleur
- IndexNoirIe.css
- IndexNoir.css (firefox)

Donc sous Firefox mon site contient un lien pour changé le site en couleur noir. Tout marche, seulement quand je passe sous IE, il ne prend plus en compte ma Css pour Ie (IndexIe.css). Et quand je retire mon javascript, Mon site marche sur les 2 navigateurs, seulement les liens pour changer la couleur ne fonctionne plus.

Je vous colle mon script au cas ou :

<!-- Script Choix CSS IE ou FIREFOX -->
<script type="text/javascript">
		var nomnav = navigator.appName;
	if (nomnav == 'Microsoft Internet Explorer') {
	  document.write("<link rel='stylesheet' media='screen' type='text/css' href='css/indexIe.css'>
	  <link rel='alternate stylesheet' media='screen' type='text/css' href='css/indexNoirIe.css'>");");
	}
	else {
	  document.write("<link rel='stylesheet' media='screen' type='text/css' href='css/index.css'>
	  <link rel='alternate stylesheet' media='screen' type='text/css' href='css/indexNoir.css'>");
	}
</script>

Ensuite les liens :

<div id="ChoixCss">
			<ul>
				<li><a href="javascript:setActiveStyleSheet('Magique')">Theme du Magicien</a> | </li>
				<li><a href="javascript:setActiveStyleSheet('Pomme')">Theme de la Pomme</a></li>
			</ul>
		</div>	

et ensuite :

<!-- Choix de la couleur CSS -->
<script type="text/javascript">
function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1
        && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = false;
     }
   }
}
</script>
<!--Fin choix de la CSS-->

Donc j'aimerais que lorsque l'on passe sur Firefox, on puisse changé la couleur du site ainsi que sur IE. Et aussi que si on choisis rien que ça prenne bien ma css lorsque je suis sous IE ou sur Firefox avec la css adéquate selon le navigateur.

Si je retires ça de mon javascript tout marche sous Ie et sous Firefox mais je ne peux plus choisir mes couleurs mais il prend bien ma cssIe. Et si je les laisses, les couleurs prennent bien ma Css mais ne prend plus celle de IE

<link rel='alternate stylesheet' media='screen' type='text/css' href='css/indexNoir.css'>

j'espere avoir été assé clair si quelqu'un pouvez m'aider car la je ne vois plus comment faire et j'ai cherché partout sur le web [/i]
Modifié par eshin (10 Oct 2006 - 12:56)

eshin a écrit :

<!-- Script Choix CSS IE ou FIREFOX -->
<script type="text/javascript">
var nomnav = navigator.appName;
if (nomnav == 'Microsoft Internet Explorer') {
document.write("<link rel='stylesheet' media='screen' type='text/css' href='css/indexIe.css'>
<link rel='alternate stylesheet' media='screen' type='text/css' href='css/indexNoirIe.css'>");");

Salut eshin ,

Avant d'aller plus loin il y a une petite erreur ici (mise en gras).

Sinon questions accessibilité :
- que se passe-t'il si javascript est désactivé ?
- que se passe-t'il si je n'ai ni IE ni FF ?

Tu aurais un lien ?

bonjour,

a premiere vu il te manque l'attribut title dans la balise link . Sans le title où tu met un nom evocateur pour ton fichiers tu ne pourras pas les selectionnés.


pourquoi ne pas ecrire directement les balise meta directement dans le html , quitte a utiliser les commentaires conditionnel , si tu veut filtrer ...

puis utilise le styleswitcher en javascript si tu veut a nouveau changer tes fichiers css.

++

Un exemple qui fonctionne chez moi dans IE et dans FF ici

oui javais quelque erreur et c'est rectifié mais rien ne change, en faite je me suis peut etre mal exprimé, mon probleme c'est que je fais mon site de sorte qu'il puisse détecté une CSS pour Ie si on naviague avec internet explorer, sinon il prend la Css pour firefox, et la ou ça se complique, c'est que si je veux mettre des styles de couleurs, je dois les faires pour les 2 navigateurs donc un pour firefox et un pour IE que japel IndexIe_noir et IndexNoir.css. Le theme par default à l'entrée du site c'est le style Pomme. Par exemple je navigue avec firefox, pas de probleme, je change mon site en noir, pas de soucis. Ensuite je navigue avec Ie et la (car on ne vois pas la différence), Ie ne prends plus ma CssIe mais ma CSS de firefox, je change de theme c'est pareil. Et plus tard je serais embété car si jai des décalages sous Ie un jour je ne pourrais pas rectifié car il prend en compte que ma css firefox

Je vais me renseigner pour le styleSwitcher, mais le truc c'est qu'il faut que je me concentre que sur la détection du navigateur qu'il puisse bien choisir la CSSIe et firefox ainsi que mes styles de couleur.

---> Heyoan : voici mon site http://magiciens.du.frui.free.fr/

(la tout marche car j'ai trafiqué ma CSS de firefox, mais si je change dans ma CSSIe le titre en rouge, ça ne le fera pas car il choisi celle de firefox, a cause de justement mes ajouts de style de couleur)

Comment lui faire comprendre que si je choisi le style Noir ça va bien chercher ma CSSNoirIe.css si je navigue sous IE ?
Modifié par eshin (10 Oct 2006 - 10:33)

gcyrillus : tout est déja dans mon html, je vous ai juste coller les parties de mes codes pour etre plus clair.

Et meme en mettant mes titles ça ne marche pas. ça ne marche que si je retire mes styles couleur
Modifié par eshin (10 Oct 2006 - 10:28)

Hello eshin,

Pour ce qui est de la détection à l'ouverture j'ai un peu modifié le test et ça à l'air de passer :

<script type="text/javascript">
		var nomnav = navigator.appName;
	if (nomnav == 'Microsoft Internet Explorer') {
	  document.write("<link title='Pomme' rel='stylesheet' media='screen' type='text/css' href='css/indexIe.css'><link title='Magique' rel='alternate stylesheet' href='css/indexNoir.css' type='text/css' media='screen'>");
	}
</script>

A suivre...
Modifié par Heyoan (10 Oct 2006 - 11:49)

ok je vais vois çe que ça donne et je te tiens au courant

en tout cas merci de m'aider c'est sympa

Et bien ça ne marche toujours pas, j'ai changé le titre en rouge sur la cssNoirIe pour voir le changement : sous firefox tout marche, mais sous IE il prend toujours pas CssNoirIe mais CssNoir (firefox) car le titre n'est pas en rouge

Heu... quand je vais voir la source je vois que tu n'as pas fait la modif que je t'ai donnée ?

[*EDIT]
Je viens d'ailleurs de le modifier un peu car il ne marchait qu'avec IE
[/EDIT]
Modifié par Heyoan (10 Oct 2006 - 11:50)

Oui c'est normal car je suis a mon stage et je fé tes modif en local, car il on bloqué tout les ports pour accedé a des ftp

jai du telecharger de memoire tout mon site sous http lol
Modifié par eshin (10 Oct 2006 - 11:51)

Ah OK !

Je t'ai mis le source que j'ai utilisé ici
j'ai enlevé les appels au flash pour tester en local et chez moi ça passe

@+
Modifié par Heyoan (10 Oct 2006 - 11:55)

eshin a écrit :
Oui c'est normal car je suis a mon stage et je fé tes modif en local, car il on bloqué tout les ports pour accedé a des ftp

jai du telecharger de memoire tout mon site sous http lol

Hello et bienvenue,

Voudrais-tu faire un effort sur l'orthographe et la lisibilité de tes messages car comme tu le sais, la vocation de ce forum est d'être accessible à tous... même aux personnes qui suivent ton sujet à l'aide d'une synthèse vocale.

Merci d'avance.
Modifié par Raphael (10 Oct 2006 - 12:06)

Heyoan ---> j'ai update ta source, tout marche sur Firefox et sur Ie mais que IndexIe est pris en compte car si tu regarde bien, tu change le titre de "bienvenue" en orange (sur indexNoir_Ie) et tu verra qu'il ne prends pas la IndexNoir_Ie. Il reste plus que l'indexNoir_Ie sois pris en compte et tout beigne. Je ne vois vraiment pas comment faire....

Raphael a écrit :

Hello et bienvenue,

Voudrais-tu faire un effort sur l'orthographe et la lisibilité de tes messages car comme tu le sais, la vocation de ce forum est d'être accessible à tous... même aux personnes qui suivent ton sujet à l'aide d'une synthèse vocale.

Merci d'avance.

J'ai juste abrégé 2 mots
et le reste ce n'est pas de ma faute je suis pas fort en orthographe. Et je fais des efforts pour ne pas parler en sms

Oups !

petite faute de frappe (en gras):

<script type="text/javascript">
		var nomnav = navigator.appName;
	if (nomnav == 'Microsoft Internet Explorer') {
	  document.write("<link title='Pomme' rel='stylesheet' media='screen' type='text/css' href='css/indexIe.css'><link title='Magique' rel='alternate stylesheet' [b]href='css/indexNoir_Ie.css'[/b] type='text/css' media='screen'>");
	}
</script>

Et le problème devrait être Résolu

yes Bravo Heyoan ! j'allais poster comme quoi je venais de trouver :

<script type="text/javascript">
		var nomnav = navigator.appName;
	if (nomnav == 'Microsoft Internet Explorer') {
	  document.write("<link title='Pomme' rel='stylesheet' media='screen' type='text/css' href='css/indexIe.css'><link title='Magique' rel='alternate stylesheet' href='css/indexNoir_Ie.css' type='text/css' media='screen'>");
	}
	else {
	  document.write("<link title='Pomme' rel='stylesheet' media='screen' type='text/css' href='css/index.css'>");
	}
</script>

ça marche, mais je viens d'essayer aussi ta technique et ça marche aussi, je vais prendre ta technique qui me semble plus adapté, et alléger le code. Je te remercie beaucoup pour ton aide car j'etais vraiment perdu lol.

Merci 1000 fois et à bientôt

je suis rentré chez moi à midi j'ai updater sur le FTP c'est impecable

je suis heureux

eshin a écrit :
je suis heureux

Cool ! Du coup moi aussi

@+

hihi à bientôt pour de nouveaux problèmes lol
Modifié par eshin (11 Oct 2006 - 17:29)