Charger une feuille de style spécifique

Porridge, le jeudi 1 novembre 2007 à 14:34:53

Bonjour,

Je suis en train de faire un site ( http://www.preparer-les-concours.com ) et comme vous pouvez le constater j'ai pas mal utilisé les feuilles css. Seul hic, IE ne reconnait pas certaines mentions comme "position:fixed" ou les "width" et j'ai la nette impression que IE et FF n'ont pas la même notion de pixel. De plus, IE invente des variations sur certaines de mes pages, et redimensionne ma zone de texte un peu comme il veut, alors que le style définit est tout à fait identique.

Petit souci : la majorité utilise Internet Explorer. Je ne peux donc pas me dire tant pis pour les utilisateurs de IE, ils n'ont qu'à utiliser FF.

J'utilise pour mon site une feuille de style externe histoire de pouvoir changer facilement les propriétés de toutes mes pages. J'ai cru voir sur un autre post (dans la rubrique "programmation") que Javascript permettait de détecter le navigateur de l'utilisateur et donc de charger une feuille de style différente pour chaque navigateur. Malheureusement, ca ne marche pas du tout. Dois-je renoncer au langage Javascript qui me met constamment sur les nerfs ? Avez-vous une meilleure idée pour résoudre mon problème ?

Bon voilà en gros ce que j'ai tenté et qui ne marche pas :

if(navigator.userAgent.indexOf('MSIE')!=-1)
document.write('<link rel="stylesheet" type="text/css" href="style_ie.css">');
else
document.write('<link rel="stylesheet" type="text/css" href="style.css">');

Merci d'avance.

Configuration: Windows XP
Firefox 2.0.0.5

Répondre à Porridge Signaler ce message aux modérateurs Aller au dernier message

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

kwaio, le jeudi 1 novembre 2007 à 14:38:14

Essaie :

if (navigator.appName=="Microsoft Internet Explorer")

PS : je n'y connais rien en JS
Contributeur CCM.
Spé Hardware/windows

Répondre à kwaio

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Porridge, le jeudi 1 novembre 2007 à 19:45:40

Salut,

Ca n'arrange rien. Merci quand même pour ta rapide réponse. Le problème vient peut être du fait que document.write n'écrit pas le <link rel> dans le <head> ?

Merci pour vos idées...

Répondre à Porridge

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Dalida, le jeudi 1 novembre 2007 à 19:56:36

salut,

détecter le navigateur ça peut vire devenir du bricolage.
as-tu essayé de faire une CSS qui passe partout ?

il y a quelques pièges à éviter mais c'est largement faisable.

[ Mathieu ]

"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

Répondre à Dalida

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Porridge, le vendredi 2 novembre 2007 à 14:19:47

Salut,

Oui il m'était impossible de faire des compromis entre IE et FF concernant les feuilles de style car comme tu peux le constater si tu t'es rendue sur mon site, j'utilise un peu à foison les css pour placer les éléments au pixel près. Donc j'ai déjà fait quelques compromis histoire que tu vomisses pas quand tu ouvres mon site avec IE mais bon tout ça ne faisait pas pro du tout.

Bon alors là j'ai enfin trouvé comment faire avec l'aide de mon frère et de quelques forums dont celui de ccm (comme tu dis Dalida, c'est vraiment du bricolage), donc si jamais quelqu'un a le même problème il galèrera moins que moi :

On utilise le php et le mod_rewrite.

On crée un fichier style.php, l'idée étant de créer la feuille de style adéquate pour chaque navigateur au chargement de la page.

le code de la feuille de style en php est le suivant :

if (ereg("MSIE", $_SERVER["HTTP_USER_AGENT"])) //pour détecter si le navigateur est IE
{
echo"body{background-color:#ffffff;...tous les styles de la page;";
}
else //pour mozilla et les autres
{
echo"propriétés css adaptées pour mozilla;";
}

Ensuite il faut transformer le fichier php en css. Pour cela, créer un fichier sans nom avec l'extension .htaccess à la racine du site web contenant les lignes :

RewriteEngine on
RewriteRule style.css style.php

Enfin, ne pas oublier d'inclure à toutes les pages le fameux <link rel="stylesheet" style="text/css" href="style.css"> entre les balises <head></head>

Et voilà le travail. On peut maintenant modifier les propriétés en fonciton de chaque navigateur. Enfin dans mon exemple, uniquement pour IE et les autres navigateurs, mais on peut adapter le code pour d'autres navigateurs.

En tout cas merci à tout le monde pour avoir tenté de m'aider, m'avoir éclairci ou m'avoir vraiment aidé.

A plus.

Au fait, peut être que ca marche mais que le code comporte quelques erreurs. Si c'est le cas, merci de me répondre.

Répondre à Porridge

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

pioul, le jeudi 28 février 2008 à 20:46:15

Alors la Porridge, c'est totalement par hasard que je suis tombé sur ton article, et franchemenet cela faisait 3 heures que je cherchais comment résoudre ce problème.
Entre les <!-- [if IE] > truc et puis tout le reste, je m'en sortais plus, la ta méthode est parfaite et elle m'a évité le suicide =)

MERCI BEAUCOUP A TOI

Répondre à pioul

Posez votre question Répondre