28172 sujets

CSS et mise en forme, CSS3

Pages :
Bonjour,

Pour obtenir un affichage homogène de mon site sur les différents navigateurs, j'utilise la méthode des commentaires conditionnels pour appeler des CSS adaptés à différentes versions d'Internet explorer.
Ca marche très bien avec le commentaire destiné à IE7, mais celui que j'ajoute pour IE6 avec l'appel de la feuille de style adaptée à IE6 ne semble pas pris en compte. En tous cas, rien ne change visiblement sur IE6. Même avec des changements qui devraient être immédiatement visibles, comme la suppression des images en background...

Voici la syntaxe de mes commentaires, dans le head de la page. Vous serez peut-être déconcertés par la syntaxe #CHEMIN{} qui précède le nom de la feuille de style : elle est nécessaire pour un site fonctionnant sur SPIP.

<!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=UTF-8" />
<title>Ciné 32</title>
&lt;script src="#CHEMIN{SpryAssets/SpryMenuBar.js}" type="text/javascript"></script>
<link href="#CHEMIN{SpryAssets/SpryMenuBarHorizontal.css}" rel="stylesheet" type="text/css" />
<link href="#CHEMIN{sommaire.css}" rel="stylesheet" type="text/css" media="all" />
<!--[if IE 6]><link href="#CHEMIN{sommaireie6.css}" rel="stylesheet" type="text/css" media="all" /><![endif]-->
<!--[if IE 7]>
<link href="#CHEMIN{sommaireie.css}" rel="stylesheet" type="text/css" media="all" />
<![endif]--> 


Et le lien vers la page en question : http://jul11.idoo.com/

Merci d'avance !
Modifié par Jul11 (12 May 2008 - 09:29)
Bonjour

Es-tu bien sûr d'avoir sauvegardé le fichier sommaireie6.css au bon endroit.

Je ne le vois pas ou plutôt Firebug ne le signale pas comme faisant partie de tes Css.

Edit : Au lieu de Firebug, lire Webdeveloper Smiley biggol
Modifié par pastazere (11 May 2008 - 18:18)
Bonjour et bienvenue parmi nous Jul11 Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
a écrit :
Je ne le vois pas ou plutôt Firebug ne le signale pas comme faisant partie de tes Css.


Normal ... il n'y a pas d'appel à cette CSS ... c'est en commentaire. Smiley ravi
Bonjour yodaswii

Effectivement c'est en commentaire conditionnel mais dans ce commentaire il est bien fait appel à une feuille de style avec la balise link, non ???


<!--[if IE 6]>
<link href="squelettes/sommaireie6.css" rel="stylesheet" type="text/css" media="all" />
<![endif]-->

Modifié par pastazere (11 May 2008 - 12:22)
a écrit :
Effectivement c'est en commentaire conditionnel mais dans ce commentaire il est bien fait appel à une feuille de style avec la balise link, non ???


Oui, il y'a bien un appel à une feuille de styles depuis la balise link.

Cependant, le commentaire conditionnel fait que l'appel ne se fera que sur la (les) version (s) d'IE spécifiée (s) par ce commentaire ... pour les autres navigateurs il ne s'agit que d'un simple commentaire (donc aucun appel). Smiley ravi
Tout d'abord mes excuses pour l'oubli de mise en forme du code. C'est réparé...
Quant au lien "Nouveau sur le forum", j'en avais pris connaissance.

Merci pour ces premières réponses.
Suite à la remarque de Pastazere (c'est quoi "Firebug" ?) j'ai vérifié, sommaireie6.css est bien au bon endroit. C'est-à-dire dans le même répertoire que les autres css appelés. Et la syntaxe du lien est identique, alors comprends pas...
J'ai procédé comme indiqué sur un tuto d'Alsacréations, alors là quelque chose m'échappe. Est-ce que ça pourrait venir du serveur qui ne rafraîchirait pas depuis que j'y ai mis sommaireie6.css ?
Modifié par Jul11 (11 May 2008 - 18:22)
Tout d'abord je tiens à apporter une rectification de mon premier post. En effet j'ai dit Firebug mais je me suis trompé et voulais dire Webdeveloper.

Et donc avec ce Webdeveloper voilà quelles sont les css attachées au site

http://img353.imageshack.us/img353/8840/idoocomet9.png

mais comme on peut le voir ci-dessus il n'y a aucune trace de sommaireie6.css

donc il y a truc que je pige pas d'autant que tu dis "j'ai vérifié, sommaireie6.css est bien au bon endroit".
Modifié par pastazere (11 May 2008 - 18:35)
Attention, le sommaire.css que tu vois est pour tous les navigateurs autres qu'IE. Pour IE7, c'est une troisième feuille de style que j'ai créée, sommaireie.css.
Or cette dernière n'apparaît pas non plus sur Webdeveloper. Ce qui m'incline à penser que c'est parce qu'elle est justement en commentaire conditionnel, tout comme sa petite soeur sommaireie6.css...
Mais tout ça n'explique toujours pas pourquoi le commentaire conditionnel fonctionne pour sommaireie.css, et non pour sommaireie6.css !
Smiley cligne
M'enfin ... je m'exprime mal ou bien Smiley eek

Comment voulez-vous que ces 2 extensions comprennent qu'un commentaire sert à l'appel de tel ou tel fichier ? Smiley cligne

a écrit :
Mais tout ça n'explique toujours pas pourquoi le commentaire conditionnel fonctionne pour sommaireie.css, et non pour sommaireie6.css !


La syntaxe semble correcte ... qu'est-ce qui te fait dire que celui-ci n'est pas pris en compte ?
Si si, tu t'exprimes bien !
J'avais bien saisi que Webdeveloper ne pouvait pas les voir puisqu'il s'agit de commentaires conditionnels Smiley cligne

yodaswii a écrit :
M'enfin ... je m'exprime mal ou bien Smiley eek


Ce qui me fait dire que le css n'est pas pris en compte, c'est que sur un changement aussi évident que la suppression sur sommaireie6.css d'une image en background, rien ne change sous IE6... Smiley fache


yodaswii a écrit :
La syntaxe semble correcte ... qu'est-ce qui te fait dire que celui-ci n'est pas pris en compte ?
Hum Smiley rolleyes ...

Je ne vois rien dans sommairei6.css qui correspond à :

a écrit :
la suppression ... d'une image en background


? Smiley sweatdrop

<oops>Désolé ... lu un peu rapidement ...</oops>
Modifié par yodaswii (11 May 2008 - 19:14)
yodaswii a écrit :
<oops>Désolé ... lu un peu rapidement ...</oops>


Non tu n'as pas lu trop vite, j'avais remis cette image dans le CSS après ma tentative infructueuse... Je suis un débutant peureux qui fait les changements au compte-gouttes et refait tout de suite si ça ne marche pas Smiley confused

C'est donc dans #Contenuselection que je viens d'enlever à nouveau cette image. Mais pas de changement sous IE6...

Au fait, comment tu fais pour lire mon CSS ?! Smiley eek
a écrit :
Au fait, comment tu fais pour lire mon CSS ?! Smiley eek


En se rendant tout simplement à la bonne adresse ... Smiley cligne

Le problème ne vient donc pas d'un problème de chemin vers ce fichier CSS.

La vérité est ailleurs mais où ? Smiley langue
Ouaip.
Va bien falloir que je trouve, mon "client" (je suis stagiaire bénévole) me met la pression pour que ça passe sur ce foutu navigateur. Smiley decu
Bon après un test rapide en local, pas de problème en ce qui concerne l'appel des feuilles depuis les commentaires conditionnels.

Je suspecte plutôt un problème d'encodage de caractères de tes feuilles de styles mais sans certitude. Smiley murf

Essaie de virer les règles @charset, de réenregistrer tes feuilles puis de les mettre sur ton serveur ...
yodaswii a écrit :
Essaie de virer les règles @charset, de réenregistrer tes feuilles puis de les mettre sur ton serveur ...


La ligne 1 "@charset "UTF-8";" ? J'efface ça ?
a écrit :
La ligne 1 "@charset "UTF-8";" ? J'efface ça ?


Oui. Smiley smile

<edit>J'ai vraiment du mal à voir d'où peux venir ce problème il faudrait déjà s'assurer qu'il n'y a pas de problème à la fois pour la structure HTML et pour le code CSS.</edit>
Modifié par yodaswii (11 May 2008 - 19:46)
yodaswii a écrit :
il faudrait déjà s'assurer qu'il n'y a pas de problème à la fois pour la structure HTML et pour le code CSS.


Mais s'il y avait un pb sur la structure, le commentaire passerait pas non plus pour IE7, non ?
Pages :