Css automatique selon le navigateur

bonjour a tous,
est-il possible de faire une css differente pour chaque navugateur qui se chargera automatiquement? une pour firefox, une pour IE6 et une pour IE7
merci pour vos pistes

Salut,

En utilisant les commentaires conditionnels, tu peux spécifier une feuille de style personnelle pour chaque version d'IE. Tous les autres navigateurs, généralement plus conformes, se contenteront de la feuille de style par défaut, qui devrait convenir à tous pour peu qu'elle soit bien programmée.

tu peux utiliser les hacks pour affecter le code css à chaque navigateur

http://www.solidstategroup.com/document/33

Rien de t'empeche ensuite d'utiliser plusieurs feuilles de style propre à chaque navigateur. que cherches tu à faire exactement ?

Inutile d'en venir au hacks, qui sont désormais déconseillés, au profit des commentaires conditionnels, tout aussi efficaces et surtout propres !!
Modifié par Mikachu (13 Nov 2007 - 11:40)

je cherche à avoir une feuille de style pour firefox, une feuille de style pour IE 6 et une feuille pour IE 7 car n'étant pas un programmeur né ni un spécialiste du css ca fait des semaines que je me bats pour avoir un site correct sur les trois navugateurs mais j'y arrive pas et mon but n'est pas d'etre un spécialiste du strict html mais simplement que mon modeste site soit correctement vu par les internautes.

Donc plutot que de passer des semaines à corriger la moindre virgule je préfère faire trois feuilles de style mais comment ensuite les faire detecter et charger automatiquement?

Comme la souligné Mikachu, les hacks sont à eviter et à utiliser en dernier recours. Utiliser une feuille de style par navigateur n'est certainement pas la solution. Essaye plutot de revoir ton code et d'obtenir un affichage correct sur l'emsemble des 3 navigateurs.
N'hesites pas à donner l'adresse du site en question

jeremw a écrit :
(...) sur l'emsemble des 3 navigateurs.

Il n'y a donc au total que 3 navigateurs? Et qu'en est-il d'Opera? De Safari? De Camino, Konqueror, Netscape, Flock, … ?

merci benjamin d'avoir sorti le dictionnaire des navigateurs mais ton commentaire ne fais pas avancer les choses .
Il s'avére que ie6+ie7 +firefox représente une trés grande partie des navigateurs utilisés par les internautes et que si on obtient un affichage correct sur ceux la, on a de forte chance d'obtenir un affichage propre sur ceux restants.
;)

jeremw a écrit :
Il s'avére que ie6+ie7 +firefox représente une trés grande partie des navigateurs utilisés par les internautes

… et tant pis pour les autres? Exit donc la majorité des utilisateurs de Mac et de Linux, tous les heureux possesseurs d'iPhone, de téléphones utilisant Opera Mini, de Safari sur Windows, de moi qui utilise Camino, … bref, ça fait quand même un paquet de monde, non?
Tu verras que ce que tu prônes va totalement à l'inverse du but poursuivi par cette communauté. L'intérêt des standards est justement de faire abstraction des navigateurs et de proposer un code commun qui sera lisible par n'importe quelle plateforme, et non par les deux plus grosses parts de marché…

je suis daccord toi benjamin mais dans ce cas ils n'ont qu'à simplifier les choses, quand on est pas expert en css on a pas forcément le temps, l'envie, les connaissances ou la motivation pour passer des nuits blanches à faire du strict, moi ca fait deux semaines que je me bats pour le positionnement de mes éléments, quand ca va sur l'un cava pas sur l'autre, et quand ca revas l'autre cava plus l'un c'est décourageant.
Pourtant à la base j'utilisai du code simple, la depuis deux jours j'ai tenté les hacks mais c'est pas encore le résultat que je souhaite.
Pour vous faire une idée voici ma page http://reyno62.free.fr/accueil.php
je suis pret à ecouter vos conseils et éventuelles corrections pour ma css ou ma page même
merci beaucoup
Modifié par reyno (13 Nov 2007 - 15:42)

et oui, ils representent 98% des navigateurs utilisés !

jeremw a écrit :
et oui, ils representent 98% des navigateurs utilisés !

Ce genre d'affirmations s'appuie en général au moins par un lien...

Idéologie, quand tu nous tiens...

Revoir les choix graphiques ou les choix de fonctionnalités. Tout n'est pas réalisable de manière robuste.

Revenir à des méthodes de présentation plus anciennes et mieux maîtrisées (tableaux, HTML de présentation, etc.)

Ne surtout pas entrer dans les sottises lancées ici de part et d'autre.

(sans aucun lien vers le site concerné, il est impossible de dire quoi que ce soit de plus pertinent).

Personnelement, je ne me fixe que sur explorer et mozilla pour faire mes pages (comme beaucoup d'autres personnes je pense). certes on ne pas tout caler à l'identique avec les css, mais on peut facilement trouver un compromis entre les deux de façon à ce que le passage d'un navigateur à l'autre ne donne pas de différences trop flagrantes.

C'est surtout avec les margin et padding que ça se joue, explorer mettant des mages plus grandes que mozilla...

Mais en faisant comme ça au moins on a qu'un seul css...
Modifié par Ripper Roo (14 Nov 2007 - 18:10)

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Maison de l'Art et de la Communication</title>
<link rel="stylesheet" href="mac_style_net.css" type="text/css" media="projection, screen, tv" />
<link rel="stylesheet" href="spip_style.css" type="text/css" media="projection, screen, tv" />
</head>
<body>
<div id="page">
	<div id="conteneur">
		<div id="bandeau"></div>
		<div id="contenant">
			<div id="gauche">
				<div id="gauche1a"></div>
				<div id="gauche1b"></div>
				<a href="accueil.php" id="accueil"></a>
				<a href="programmation.php" id="programmation"></a>
				<a href="ecm.php" id="ecm"></a>
				<a href="mediatheque.php" id="mediatheque"></a>
				<a href="theatre.php" id="theatre"></a>
				<a href="danse.php" id="danse"></a>
				<a href="musique.php" id="musique"></a>
				<a href="artsp.php" id="artsp"></a>
				<a href="eveil.php" id="eveil"></a>
				<a href="multimac.php" id="multimac"></a>
				<div id="cadrebas"></div>
			</div>
			<!-- <div id="blanc"></div> -->
			<div id="logorubrique"><img src="rubon32-6eef9.jpg" align="left" class="spip_logos" alt="" /></div>
			<div id="dates"> 
				<font size="1" color="#5d4b9f" face="Verdana">Le Mar. 23/11 à 14h00 et 19h00 <b class="spip">à la MAC</b>.<br />
				Les Ven. 26 et Sam. 27/11 à 10h00 et 14h00 au lyçée A. Béhal <br />
				et le Lun. 29/11 à 10h00 et 14h00 au collège P. Langevin</font><br />
				<br />
				<font size="1" color="#5a4b3f" face="Verdana">Tout public<br />
				Collège Lyçée<br />
				Tarif plein&nbsp;: 8€<br />
				Sur réservation&nbsp;: 6€<br />
				Tarif réduit&nbsp;: 3,50€<br />
				Elèves atelier thâtre&nbsp;: gratuit<br />
				Parent élves atelier théâtre&nbsp;: 5,40€</font>
			</div>
			<div id="prochain-ev"></div>
			<div id="titre-ev"> 
				<div align="center">
					<b><a href="spip.php?rubrique32" class="format_png"><img src="6188982c1a2d025a4ad5b11fa6caf4f3.png" class="format_png" alt="Bashir Lahzar" /></a></b><br/>
					<b><a href="spip.php?rubrique32"></a></b>
					<img src="92819eabfe7d885425db87fd2f0cbd51.png" class="format_png" alt="La Compagnie" /><br />
					<div id="date"><font size="1" color="#5d4b9f" face="Verdana">Vendredi 23 novembre</font></div>
				</div>
				<div id="logo-ev" align="center"><img src="f0669ed611bc868aec2b560ade0e8b1c.png" alt="" class="spip_logos format_png" /></div>
			</div>
			<a href="presentation.php" id="presentation"></a>
			<a href="infos.php" id="infosprat"></a>
			<div id="agenda">
				<div id="agenda-haut"></div>
				<div id="agenda-corps"> 
					<div align="center"><font size="1" color="#5d4b9f" face="Verdana">Vendredi 30 novembre</font><br />
					<a href="spip.php?rubrique33" class="format_png"><img src="1b32682cb0083c2861400e6426b8665c.png" class="format_png" alt="Petit Ours" /></a></div>
					<div align="center"></div>
					<div align="center"></div>
					<div align="center"><img src="9be981bec647a2015b75ef7fa2913582.png" class="format_png" alt="Théatre Risorius" /></div><br />
					<div align="center"><font size="1" color="#5d4b9f" face="Verdana">Du  30 novembre au 27 décembre</font><br />
					<a href="spip.php?rubrique37" class="format_png"><img src="b206a0dbe16c80069cd0ddefebe42843.png" class="format_png" alt="Une exp&#233;rience eternelle" /></a></div>
					<div align="center"></div>
					<div align="center"><img src="a13da893171125a2597729b15b2ed5a7.png" class="format_png" alt="de plus" /></div><br />
					<div align="center"><img src="62832b8982b7b4dd8c8d7d2e446250fa.png" class="format_png" alt="Jean-Louis Accettone" /></div><br />
					<div align="center"><font size="1" color="#5d4b9f" face="Verdana">Dimanche 2 décembre</font><br />
					<a href="spip.php?rubrique35" class="format_png"><img src="5e692126656f19a34e6f05f52f01ff03.png" class="format_png" alt="La Chorale Vitarime" /></a></div>
					<div align="center"></div>
					<div align="center"><img src="43d5875d39757be255ca1698bdb44979.png" class="format_png" alt="à l'Eglise Saint-Vaast" /></div><br />
					<div align="center"><img src="c075b3976d6e4db320fff07f86752b75.png" class="format_png" alt="La MAC" /></div><br />
					<div id="agenda-bas"></div>
				</div>
			</div>
		</div>
	<div id="pied"></div>
	</div>
</div>
<!-- phpmyvisites -->
<div style="display:none;">
	<script type="text/javascript">
	<!--
	var a_vars = Array();
	var pagename='';
	var phpmyvisitesSite = 1;
	var phpmyvisitesURL = "http://reyno62.free.fr/spip.php?page=phpmyvisites&var_nophpmv=1";
	//-->
	</script>
	<script src="http://reyno62.free.fr/plugins/phpmyvisites_1_9/spip_phpmyvisites.js" type="text/javascript"></script>
	<noscript><img src="http://reyno62.free.fr/spip.php?page=phpmyvisites&amp;var_nophpmv=1" alt="phpMyVisites" class="phpmyvisitestag" /></noscript>
</div>
<!-- /phpmyvisites -->
</body>
</html>

bon alors voilà ce que j'ai fait en "nettoyant" ton code, par contre ............. reste beaucoup de boulot sans vouloir te décourager, et y a plein de trucs j'ai même pas essayer de comprendre les liens vide, les balises font alors que tu es dans un div avec une class (j'ai même pas ouvert le fichier css) où tu px normalement indiquer les paramètres mis dans font ........ en voyant ça j'arrive facilement à penser que tu as repris la source de ce code quelque part et que tu essayes de l'adapter alors que tes connaissances actuelles en html et css te limitent à la compréhension même de ce code. à la limite j'te conseillerais de refaire ton site avec des tableaux, c'est pas grave, mais au moins tu auras pas à te prendre la tête quand au positionnement de tes éléments en css, puis rien ne t'empèche une fois que tu auras obtenu un resultat satisfaisant de te reessayer aux div ayant un exemple du résultat que tu souhaites obtenir.

Dans l'ensemble ton site semble relativement "facile" à réaliser, ce qui ne necessite pas de mettre un css pour chaque navigateur, cette solution à mes yeux est rarissime, j'ai la plupart du temps réussit à avoir le même rendu sous les navigateurs avec un seul css, sauf pour min-height:100% qu'il faut changer en height:100% pour ie6.

Voilà fais simple
et bon courage
++
seb

Salut,

Pour t'aider à traiter les conditions un exemple de code (a priori ok).

Je te suggère d'épurer le + possible et de ne conserver que le minimum possible de différences entre des diverses css.

cas avec 3 css différentes et complètes (pas le + simples à maintenir)
ou
cas "idéal" :
mettre un appel à une css générique avant les conditions, et ne mettre ds les css sous conditions QUE les différences venant écraser les proporiétés de la générique.

<link media="screen, projection" type="text/css" href="/xxxxxFF.css" rel="stylesheet">
<!--><![endif]>
<!--[if lt IE 7]>
<link media="screen, projection" type="text/css" href="/xxxxxie6.css" rel="stylesheet" />

<![endif]--><!--[if IE 7]> 
<link media="screen, projection" type="text/css" href="/xxxxxie7.css" rel="stylesheet" />

<![endif]-->

Bon courage.