28172 sujets

CSS et mise en forme, CSS3

Une css pour IE exclusivement ne foncionne pas !

Salut,
De nouveau confronté à un problème, je fais appel à vous pour m'aider à le résoudre.
Je souhaite établir une feuille de style exclusive pour IE sur mon menu, or celle-ci ne fonctionne pas totalement.
Dans mon entête de page j'ai placé cette ligne après la déclaration de la premeière feuille:
<!--[if IE]>
<link rel="stylesheet" href="[(#CHEMIN{css/ie.css})]" type="text/css" media="all" />
      <![endif]-->

Mon menu pour les autres nav est comme suit :

.image1 {background: url("../images/menu.jpg");}
.image2 {background: url("../images/menu2.jpg");}
.menu {float: left;width: 100%;font-size: 65%;padding:0; margin:0; list-style:none; height:30px; z-index:500; font-family:arial, verdana, sans-serif;}
.menu li.top {display:block; float:left;}
.menu li a.onglet {display:block; float:left; height:36px; color:#444; text-decoration:none; }/* Cette ligne modifie le comportement des onglets au survol de la souris */
.menu li a.onglet span { position:relative;display:block; height:30px; float:left; line-height:27px; font-size:1em; font-weight:bold; padding:0 10px; cursor:pointer; background: url(../images/menu.png) no-repeat;}
.menu li a.onglet b {display:block; width:15px; height:30px; float:left; background: url("../images/menu_D.png") no-repeat;}
.menu li a.onglet b.down {background: url("../images/tabdown_off.png") no-repeat;}
.menu li a.onglet:hover span {color:#fff; background: url("../images/tab.png") no-repeat; line-height:26px;}
.menu li a.onglet:hover b {color:#fff; background: url("../images/tabb_on.png") no-repeat;}
/* Onglets Menu au survole */
.menu li:hover > a.onglet span {color:#fff; background: url("../images/menu.png") no-repeat; line-height:26px;}
.menu li:hover > a.onglet b {color:#fff; background: url("../images/menu_D.png") no-repeat;}
.menu a:hover {visibility:visible; position:relative; z-index:200;}
.menu li:hover {position:relative; z-index:200;}
.menu ul{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sous_menu {left:0; top:32px;padding:3px; white-space:nowrap; width:auto;border: 2px solid #f5f5f5;-moz-border-radius: 10px; height:auto; z-index:300;background: url("../images/menu4.png") top left repeat-y;}
.menu :hover ul.sous_menu li {position:relative;display:block; height:20px; float:left; width:100%; font-weight:bold; }
.menu :hover ul.sous_menu li a {display:block; position:relative; font-size:1.2em; font-weight:bold; height:20px; width:100%; line-height:20px; text-indent:1px; color:#000; text-decoration:none;}
.menu :hover ul.sous_menu li a:hover {background:#355766; color:#fff;}

Le menu que je souhaite faire pour IE et que j'ai modifié dans la feuille spécifique pour lui, est comme suit, mais impossible de lui attribué ce style, il prend systématiquement les caractériqstiques de la première feuille :
.menu {float: left;font-family: Verdana, "Bitstream Vera Sans", Helvetica, Arial, sans-serif; width: 100%; background-color: #5C3566; color: inherit; background-image: url(82a1cd.png); font-size: 65%; padding: 0; margin: 0;}
.menu ul li a, .menu ul li a:visited {display: block;clear: none; text-decoration: none ;padding-left: 1em; padding-right: 1em; padding-top: 0.1em; padding-bottom: 0.1em; margin-bottom:1px; color: white; background-color: transparent; width: auto; border-right: #fff 1px solid;}
.menu ul {padding:0; margin:0; list-style-type: none; }
.menu ul li {float:left; position:relative;}
.menu ul li ul {visibility:hidden; position:absolute; z-index:80; left:-1px; top:1.55em;}
.menu table {border-collapse:collapse; margin:0; padding:0; font-size:1em; margin:-1px;}
.menu ul li:hover a, .menu ul li a:hover {color:#000; background:#B4A0B7;}/*Onglets au survole */
.menu ul li:hover ul, .menu ul li a:hover ul {visibility:visible; bottom:26px; left:-3px;}/* Onglets sous-menus */
.menu ul li:hover ul li a.sub, .menu ul li a:hover ul li a.sub {background:#a7c9c9; color:#000;}
.menu ul li:hover ul li, .menu ul li a:hover ul li {display:block; background:#fff; color:#000; width:150px; clear:both;left:2px;}/* Onglets de sous-menus */
.menu ul li:hover ul li:hover a.sub, .menu ul li a:hover ul li a:hover.sub {background:#B4A0B7; color:#000;}
.menu ul li:hover ul li ul, .menu ul li a:hover ul li a ul {visibility:hidden; position:absolute; top:0px; }/* Onglets de sous-sous-menus */
.menu ul li:hover ul li a, .menu ul li a:hover ul li a {display:block; background:#5C3566; color:#fff; width:100%; padding-left:10px;}/* Onglets de sous-menus*/
.menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {background:#B4A0B7; color:#000;}/* Onglets sous-menu au survole */
.menu ul li:hover ul li:hover ul, .menu ul li a:hover ul li a:hover ul {visibility:visible; left:171px; bottom:0;}
.menu ul li:hover ul li:hover ul li a, .menu ul li a:hover ul li a:hover ul li a {background:#5C3566; color:#fff;} /*Onglets de sous-sous-menu */
.menu ul li:hover ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover ul li a:hover {background:#B4A0B7; color:#fff;}
.menu ul li:hover ul.left, .menu ul li a:hover ul.left {left:-105px;}
.menu ul li:hover ul li:hover ul.left, .menu ul li a:hover ul li a:hover ul.left {left:-210px; width:209px;}

Comment puis-je faire pour obliger IE à utiliser cette feuille qui pour l'instant ne l'ai pas du tout ?

Merci de votre éclairecissement !
Bonjour,

Alors en quelques points:

- Sans page en ligne, difficile de dire quel est le problème; il peut venir du code HTML, des chemins de fichier qui sont mauvais, ou éventuellement de la priorité des sélecteurs.

- Tu as deux versions complètes du code CSS pour ton menu, une dans ta feuille de styles principale et une dans la feuille appelée uniquement par IE? Si c'est le cas, ce n'est pas ainsi qu'il faut procéder. Internet Explorer lira et appliquera les deux feuilles de styles, et donc la deuxième ne doit contenir que des correctifs CSS, pas une version alternative de tes styles.

- Ton commentaire conditionnel vise toutes les versions d'Internet Explorer. Est-tu certain que ces correctifs CSS doivent être appliqués de la même manière à IE6, IE7 et au futur IE8? Il est probable que non.
Je vais faire un transfert sur mon dev, mais je ne doit mettre que la partie css changeante ? c'est ca ? puis, le commentaire est bien placer en appel en dernier ? après la feuille de style princiale pour les autres nav ? ensuite ca ne concerne que IE6

Excusez, mais je part au boulot là Smiley lol
Voici le lien de mon dev, je 'mappercois que dans le code source sous IE6, je ne vois pas mon appel à la feuille de style Smiley confused
Mon site beta

Après édition, la ligne suivante : 
<!--[if lte IE 6]>
<link rel="stylesheet" href="[(#CHEMIN{css/ie.css})]" type="text/css" media="all" />
      <![endif]-->


N'est pas dans le code source de mes pages Smiley confus j'y comprend rien là ...
Modifié par Express (04 Aug 2008 - 08:19)
Bonjour,

Ce lien fait systématiquement planter mon IE6 (version standalone).

Par ailleurs, le code HTML de ton menu comporte des erreurs : on trouve plusieurs li ouvrant à la suite.
<li>
    <li class="top">


Sinon, c'est un avis qui n'engage que moi, je ne suis pas persuadé que mettre du code HTML en commentaire conditionnel soit une bonne solution.

EDIT : pour compléter ma réponse précédente, l'appel de ton fichier ie.css se trouve bien dans le code source, tu dois avoir un problème de cache.
Modifié par Ericf (04 Aug 2008 - 13:53)
Ericf a écrit :
Bonjour,

Ce lien fait systématiquement planter mon IE6 (version standalone).

Par ailleurs, le code HTML de ton menu comporte des erreurs : on trouve plusieurs li ouvrant à la suite.
<li>
    <li class="top">


Sinon, c'est un avis qui n'engage que moi, je ne suis pas persuadé que mettre du code HTML en commentaire conditionnel soit une bonne solution.

EDIT : pour compléter ma réponse précédente, l'appel de ton fichier ie.css se trouve bien dans le code source, tu dois avoir un problème de cache.


J'ai revue les erreurs de < li> (je n'ai pas finis mon menu encore,donc il y à encore des erreurs...), mais je n'arrive toujours pas à faire fonctionner mon autre menu avec IE 6 , c'est vraiment la galère ce truc, mais bon, faut quand même faire avec ce navigateur de mes visiteurs,tant qu'il ne sera pas remplacer ...
Modifié par Express (04 Aug 2008 - 19:27)
Express a écrit :
mais je n'arrive toujours pas à faire fonctionner mon autre menu avec IE 6

Il faut dire que le procédé est assez casse-gueule:
- code HTML partiellement différent à coup de commentaires conditionnels (dont je ne suis même pas sûr qu'ils fassent ce que tu en attends... j'ai croisé la technique en question chez Laurent Denis, mais ça fatigue mes pauvres neuronnes et je préfère l'éviter de peur de faire des bêtises);
- feuille de «correctifs» CSS qui ne contient pas des correctifs mais les styles complets d'un menu alternatif.

Arriver à réaliser tout ça sans se tromper en chemin me semble difficile.

Mon conseil:
1. virer complètement ce menu;
2. envisager de se passer de menu déroulant (parce que c'est has been Smiley lol );
3. si on a vraiment besoin d'un menu déroulant, utiliser JavaScript pour a) rendre le menu déroulant compatible IE6 et b) rendre le menu déroulant plus ergonomique et accessible au clavier.

Pour le 3, j'ai testé récemment Superfish, un plugin pour jQuery, qui fonctionne plutôt bien.
cela reste inaccéssible et en plus non valid si javascript pas activer ..... non ?
Modifié par Express (04 Aug 2008 - 22:12)
j'ai un probleme en css qui fait planté IE6 je trouve pas encore le bout de code qui cose ça

j'ai creer deux script un pour afficher le profile des utilisateur et l autre pour envoyer des mail sur mon site sur la page

http://pages-annonces.go1.cc/index.p...id=30&Itemid=0

quand on clic sur "Profile de l'utilistaur" une fenetre s affiche et quand je clic sur la meme petite fenetre qui s affiche "Contactez cette persone par E-mail" et je ferme la fenetre juste apres et je clic sur le body de la fenetre principale Internet explorer plante et le nombre de processus augmente vite

je note que le script fonctionne correctement sur firefox

aidé moi a trouvé cette faille Smiley biggol
@enfer > je ne vais pas m'amuser à supprimer tous tes messages ! Merci d'arrêter de "Répondre" à un sujet déjà existant et de cliquer sur "Nouveau sujet" par exemple dans le Salon général et débutants.

En passant ta question est incompréhensible et ton lien ne mène nulle part. Si tu n'es pas plus explicite tu vas avoir du mal à ce qu'on t'aide.
Sujet clos
Aller à