Bonjour,
Sur mes deux sites web www.barf.ch et www.molos.ch, j'ai des menus entièrement faits en CSS. Ce sont exactement les mêmes sur chaque site, donc vous pouvez regarder indifféremment sur l'un ou l'autre.
Ces menus fonctionnent pafaitement tels quels avec Firefox. Pas de problème à ce niveau là. Par contre avec IE 6, j'ai dû rajouter deux choses : 1 bout de code sur chacune des pages et un ficher csshover.htc sur mon serveur. Sans ces deux choses, le menu ne fonctionne pas avec IE 6. C'est à dire que lorsqu'on passe la souris sur le menu, ce dernier ne se "déroule" pas.
Donc jusqu'à maintenant, tout cela fonctionnait à merveille : naturellement sur Firefox et grâce à l'ajout de code et de csshover.htc sur IE 6.
Seulement sur IE7, ça ne marche plus... :hover semble fonctionner sur <a> mais pas sur <li>
J'ai essayé
Coment dois-je modifier csshover.htc pour que cela fonctionne aussi avec IE7 7 ? (je détestais déjà IE mais alors le 7, je crois que c'est encore pire)
Voici donc le code, et en dessous, le contenu de csshover.htc :
Merci d'avance.
Emma[/i][/i][/i][/i][/i][/i][/i]
Modifié par EmmaZL (29 Nov 2006 - 13:56)
Sur mes deux sites web www.barf.ch et www.molos.ch, j'ai des menus entièrement faits en CSS. Ce sont exactement les mêmes sur chaque site, donc vous pouvez regarder indifféremment sur l'un ou l'autre.
Ces menus fonctionnent pafaitement tels quels avec Firefox. Pas de problème à ce niveau là. Par contre avec IE 6, j'ai dû rajouter deux choses : 1 bout de code sur chacune des pages et un ficher csshover.htc sur mon serveur. Sans ces deux choses, le menu ne fonctionne pas avec IE 6. C'est à dire que lorsqu'on passe la souris sur le menu, ce dernier ne se "déroule" pas.
Donc jusqu'à maintenant, tout cela fonctionnait à merveille : naturellement sur Firefox et grâce à l'ajout de code et de csshover.htc sur IE 6.
Seulement sur IE7, ça ne marche plus... :hover semble fonctionner sur <a> mais pas sur <li>
J'ai essayé
<!--[if lt IE 7]><!--[if IE>Coment dois-je modifier csshover.htc pour que cela fonctionne aussi avec IE7 7 ? (je détestais déjà IE mais alors le 7, je crois que c'est encore pire)
Voici donc le code, et en dessous, le contenu de csshover.htc :
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc); /* call hover behaviour file */
font-size: 100%; /* enable IE to resize em fonts */
}
#menu ul li {
float: left; /* cure IE5.x "whitespace in lists" problem */
width: 100%;
}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
}
#menu a, #menu h2 {
font: 12px Trebuchet MS;
/* if required use em's for IE as it won't resize pixels */
}
</style>
<![endif]-->
<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
* Whatever:hover - V1.41.050927 - hover & active
* ------------------------------------------------------------
* (c) 2005 - Peter Nederlof
* Peterned - http://www.xs4all.nl/~peterned/
* License - http://creativecommons.org/licenses/LGPL/2.1/
*
* Whatever:hover is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 2.1 of the License, or (at your option) any later version.
*
* Whatever:hover is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* Credits and thanks to:
* Arnoud Berendsen, Martin Reurings, Robert Hanson
*
* howto: body { behavior:url("csshover.htc"); }
* ------------------------------------------------------------
*/
var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)) [decu]hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
onhover:{on:'onmouseover', off:'onmouseout'},
onactive:{on:'onmousedown', off:'onmouseup'}
}
function parseStylesheets() {
if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
window.attachEvent('onunload', unhookHoverEvents);
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i<l; i++)
parseStylesheet(sheets[i]);
}
function parseStylesheet(sheet) {
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
} catch(securityException){}
}
try {
var rules = (currentSheet = sheet).rules, l = rules.length;
for(var j=0; j<l; j++) parseCSSRule(rules[j]);
} catch(securityException){}
}
function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!csshoverReg.test(select) || !style) return;
var pseudo = select.replace(/[^:]+ [decu][a-z-]+).*/i, 'on$1');
var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
var affected = select.replace(/ [decu]hover|active).*$/, '');
var elements = getElementsBySelect(affected);
if(elements.length == 0) return;
currentSheet.addRule(newSelect, style);
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className, activators[pseudo]);
}
function HoverElement(node, className, events) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
function hookHoverEvent(node, type, handler) {
node.attachEvent(type, handler);
hoverEvents[hoverEvents.length] = {
node:node, type:type, handler:handler
};
}
function unhookHoverEvents() {
for(var e,i=0; i<hoverEvents.length; i++) {
e = hoverEvents[i];
e.node.detachEvent(e.type, e.handler);
}
}
function getElementsBySelect(rule) {
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i=0; i<parts.length; i++) {
nodes = getSelectedNodes(parts[i], nodes);
} return nodes;
}
function getSelectedNodes(select, elements) {
var result, node, nodes = [];
var identify = (/\#([a-z0-9_-]+)/i).exec(select);
if(identify) return [doc.getElementById(identify[1])];
var classname = (/\.([a-z0-9_-]+)/i).exec(select);
var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
for(var i=0; i<elements.length; i++) {
result = tagName? elements[i].all.tags(tagName):elements[i].all;
for(var j=0; j<result.length; j++) {
node = result[j];
if(classReg && !classReg.test(node.className)) continue;
nodes[nodes.length] = node;
}
} return nodes;
}
</script>Merci d'avance.
Emma[/i][/i][/i][/i][/i][/i][/i]
Modifié par EmmaZL (29 Nov 2006 - 13:56)
, je saurais vraiment pas te dire ce qu'il se passe parce que moi, j'ai toujours vu que pour mon site, ça fonctionnait toujours très bien (avec des différences entre navigateurs mais bon), mais là, je vois pas du tout. Désolé.
car j'ai copier/coller le code que tu as mis en remplacant les