Bonjour, Bonsoir..
Je viens ici pour demander conseil et surtout une solution.
Ce problème de compatibilité me hante j'ai passé des heures à essayer de chercher où etait la faute, mais en vain..
Mon menu n'est pas très rechercher, il est simple il fonctionne à merveille sur IE7, FF, Opéra,Safari.. Mais...
Mon boss m'impose qu'il fonctionne aussi en IE6, la version que encore quelques anciens personnages(
donc lui-même) utilisent, alors qu'il y a la IE8 qui est sortie..mais enfin moi personnelemnt j'ai un vrai problème avec IE..Bref, j'ai cherché, regardé le comment du pourquoi pendant tellement de temps que je ne sais plus...
Je sais simplement qu'un regard nouveau ne fait pas de mal...Alors qu'une bonne âme vienne à mon secours et me libère..
Le code HTML avec le menu:
(Il est assez pas bien fait, je sais soyez cléments avec une apprentie, qui utilise golife, le bureau n'est pas à jour vous allez dire..c'est le cas.. mais bref je vais pas bosser tout le temps à la maison avec la CS4^^)[spoiler]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="description" content="apm recherche développement,maisons construites écologiquement grâce au bois massif " />
<meta name="keywords" content="apm, recherche, développement, photos, tables, presse, diplôme, maisons, bois, massif, révolution, famille, maisonboismassif.com " />
<title>maisonboismassif.ch -- Expositions</title>
<link href="police.css" rel="stylesheet" type="text/css" media="all">
</head>
<table width="68%" border="1" cellspacing="2" cellpadding="0" align="center">
<tr align="center">
<td bgcolor="white" align="center">
<body bgcolor="darkred" scroll="yes" leftmargin="5" marginheight="0" marginwidth="5" topmargin="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr height="124">
<td colspan="3" align="left" height="124">
<div align="center">
<img class="cadre_images_fin" src="images/titre.gif" alt="" align="middle" border="0"/><br/>
</div>
</td>
</tr>
<tr>
<td align="left" bgcolor="#8b0000" width="100%">
<div align="absolut">
<ul class="menu"align=" right">
<li><a style="background-color:darkred; cursor:default" href="#"> </a></li>
<li><a href="http://maisonboismassif.ch/index.html">Page d'accueil </a></li>
</li>
</ul>
</div>
<div align="left">
<ul class="menu">
<li><a href="#">Description</a>
<ul>
<li><a href="http://maisonboismassif.ch/global.html">Aperçu global</a></li>
<li><a href="http://maisonboismassif.ch/avantages.html">Avantages techniques</a></li>
<li><a href="http://maisonboismassif.ch/parois.html">Fiche technique parois </a></li>
<li><a href="http://maisonboismassif.ch/cout.html">Coût d'une maison</a></li>
</ul>
</li>
<li><a href="#">Photos </a>
<ul>
<li><a href="photos.html">Toutes les photos</a></li>
</ul>
</li>
<li><a href="#">Presse</a>
<ul>
<li><a href="http://maisonboismassif.ch/presse.html">Communiqué de presse</a></li>
<li><a href="http://maisonboismassif.ch/articles.html">Articles de presse</a></li>
</ul>
</li>
<li><a href="#">Dérivés </a>
<ul>
<li><a href="http://apm-rd.ch/images/bassin/index.htm">Piscine en bois massif</a></li>
<li><a href="http://maisonboismassif.ch/table.html">Table "Noeud du charpentier"</a></li>
<li><a href="http://maisonboismassif.ch/tour.html">Tour octogonale</a></li>
</ul>
</li>
<li><a href="#">Liens</a>
<ul>
<li><a href="http://apm-rd.ch/">APM R&D</a></li>
<li><a href="http://m3d.ch/">Mersserli Informatique</a></li>
<li><a href="http://cinema4d.ch/">Cinema 4D.ch</a></li>
<li><a href="http://maisonboismassif.ch/liens.html">Tous les liens...</a></li>
</ul>
</li>
<li><a href="#">Contact </a>
<ul>
<li><a href="http://maisonboismassif.ch/contact.html">Contact</a></li>
</ul>
</li>
<li><a href="#">Communications</a>
<ul>
<li><a href="http://maisonboismassif.ch/expos.html">Expositions</a></li>
<li><a href="http://maisonboismassif.ch/table1.html">Tables</a></li>
</ul>
</li>
</div>
</ul>
</td>
<td valign="top" bgcolor="#8b0000">
<div align="center"><div id=cadremenu STYLE="position:absolute; visibility:hidden; z-index:3">
</td>
<td valign="top" bgcolor="#8b0000"><select name="language" class="searchDropdown" onchange="document.location.href=this.value">
<option value="#" selected="1">Select Language</option>
<option value="http://www.holzhausmassiv.ch/index.html">Deutsch</option>
<option value="http://www.maisonboismassif.ch">Francais</option>
</select></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="45">
<td width="162" height="45"></td>
<td class="titre_page" height="45"></td>
</tr>
<tr>
<td valign="top" width="162"></td>
<td valign="top">
<div align="left">
<div align="left">
<div align="left">
<div align="left">
<div align="left">
<div align="left">
<div align="left">
<p><br/>
<b>Exposition 2009<br/>
</b><br/>
<br/>
<br/>
<table width="487" border="0" cellspacing="0" cellpadding="0">
<tr height="10">
<td width="154" height="10"></td>
<td height="10"><br/>
</td>
</tr>
<tr>
<td width="154">
<div align="center">
<a href="http://www.salonbois.ch/" target="_blank"><img src="images/logos_expos/salon_bois.gif" alt="" width="158" height="64" border="0"></a></div>
</td>
<td>
<table width="284" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15"></td>
<td>
<div align="center">
Salon du bois à bulle du 06 au 08.02. 09</div>
</td>
</tr>
</table>
</td>
</tr>
<tr height="10">
<td width="154" height="10"></td>
<td height="10"><br/>
</td>
</tr>
</table>
<table width="487" border="0" cellspacing="0" cellpadding="0">
<tr height="10">
<td width="154" height="10"></td>
<td height="10"><br/>
</td>
</tr>
<tr>
<td width="154"><a href="http://www.habitat-jardin.ch/" target="_blank"><img src="http://apm-rd.ch/images/habijardin.gif" alt="" width="200" height="41" border="0"></a></td>
<td>
<table width="284" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15"></td>
<td>Beaulieu Lausanne du 28.02.09 au 08.03.09</td>
</tr>
</table>
</td>
</tr>
<tr height="10">
<td width="154" height="10"></td>
<td height="10"><br/>
</td>
</tr>
<tr>
<td width="154"><a href="http://www.reconvilier.ch/foiredechaindon.html" target="_blank"><img src="http://apm-rd.ch/images/foirechaindon.gif" alt="" width="200" height="63" border="0"></a></td>
<td>
<table width="284" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15"></td>
<td>Foire de chaindon le 07.09.09</td>
</tr>
</table>
</td>
</tr>
<tr height="10">
<td width="154" height="10"></td>
<td height="10"><br/>
</td>
</tr>
</table>
<table width="180" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
[/spoiler]
Code CSS:[spoiler]
body {
background-image: url("images/bg.png");
behavior: url("csshover.htc")
}
p
{
color: #000;
font-size: 11pt;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
}
td
{
color: #000;
font-size: 11pt;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
}
.titre_page
{
color: #000;
font-size: 13pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold
}
a:link
{
color: darkred;
font-size: 11pt;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
}
a:hover
{
color: #f00;
font-size: 11pt;
text-decoration: underline;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
}
a:visited
{ color: #f00;
font-size: 11pt
}
.cadre_images
{
border: solid 1pt #000
}
.cadre_images_fin
{
border: solid 2pt #000
}
.cadre_table
{
border: solid 7pt #696969
}
/*menu,FF, IE7, Saf*/
ul.menu
{
list-style-type: none;
margin : 0;
padding: 0;
}
ul.menu li
{
float: left;
margin: 0;
border: 0;
}
ul.menu ul
{
position: absolute;
display: none;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.menu ul li
{
float: none;
padding: 0;
}
ul.menu li a:link, ul.menu li a:visited
{
display: block;
color: white;
background: darkred;
margin:0;
padding: 3px 3px;
text-decoration: none;
}
ul.menu li a:hover
{
background: #787878;
color:black;
}
ul.menu li:hover > ul
{
display: block;
}
ul.menu a
{
border:1px solid darkred;
}
[/spoiler]
Et le CSSHover.htc (que je pensais qu'il allait me sauver la vie)
[spoiler]
<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
* HOVER - V1.00.031224 - whatever:hover in IE
* ---------------------------------------------
* Peterned - http://www.xs4all.nl/~peterned/
* (c) 2003 - Peter Nederlof
*
* howto: body { behavior:url("csshover.htc"); }
* ---------------------------------------------
*/
var CSSBuffer, doc = window.document;
function parseStylesheets() {
var rules, sheet, sheets = doc.styleSheets;
var bufferIndex = sheets.length;
var head = doc.getElementsByTagName('head')[0];
var buffer = doc.createElement('style');
buffer.setAttribute('media', 'screen');
buffer.setAttribute('type', 'text/css');
head.appendChild(buffer);
CSSBuffer = sheets[bufferIndex];
for(var i=0; i<sheets.length -1; i++) {
sheet = sheets[i];
if(!sheet.media || sheet.media == 'screen') {
rules = sheet.rules;
for(var j=0; j<rules.length; j++) {
parseCSSRule(rules[j]);
}
}
}
}
function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!select || !style || select.indexOf(':hover') < 0) return;
var newSelect = select.replace(/\:hover/g, '.onHover');
CSSBuffer.addRule(newSelect, style);
var affected = select.replace(/\:hover.*$/g, '');
var elements = getElementsBySelect(affected);
for(var i=0; i<elements.length; i++) {
if(elements[i].nodeName == 'A') continue;
new HoverElement(elements[i]);
}
}
/**
* HoverElement
* -------------------------
* applies the hover
*/
function HoverElement(element) {
if(element.isHoverElement) return;
element.isHoverElement = true;
element.attachEvent('onmouseover',
function() { element.className += ' onHover'; });
element.attachEvent('onmouseout',
function() { element.className = element.className.replace(/onHover/g, ''); });
}
/**
* domFinder
* -----------------------------------
* returns list of elements based on css selector
*/
function getElementsBySelect(rule) {
var nodeList = [doc], sets = rule.split(' ');
for(var i=0; i<sets.length; i++) {
nodeList = domFinder.filterNodes(sets[i], nodeList);
} return nodeList;
}
var domFinder = {
findNodes:function(tag, docs) {
var res, nodes = [];
for(var i=0; i<docs.length; i++) {
res = docs[i].getElementsByTagName(tag);
for(var j=0; j<res.length; j++) nodes[nodes.length] = res[j];
} return nodes;
},
filterNodes:function(select, docs) {
var filtered = [], nodes,rule,atr,s = (/#|\./).exec(select);
if(!s) return this.findNodes(select, docs);
nodes = this.findNodes((rule = select.split(s))[0], docs);
atr = (s == '#')? 'id':'className';
for(var i=0; i<nodes.length; i++) {
if(new RegExp('(^|\\s)' + rule[1] + '(\\s|$)').exec(nodes[i][atr]))
filtered[filtered.length] = nodes[i];
} return filtered;
}
}
</script>
[/spoiler]
Merci d'avance. Salutations à tout bientôt.
