Un souci de compatibilité...

Bonjour,

Une éternité que je n'étais pas repassé par ici.
Une éternité, aussi que je n'avais pas fait de scripts et pages Web !

Pour aider un ami à créer un site pour une association :

1) Nous avons un problème d'affichage de Background :
La page est correcte sous Firefox, mais le background est invisible sous IE8 et IE9.

Voici le code utilisé :

<style type="text/css">
  body {
	background-image: url(2012/fondecran10.jpeg);
	background-position: top left ou left top , '0% 0%';
	background-attachment: no-fixed
	background-repeat: no-repeat;
	display: block;
	height: 100%;
	filter:alpha(opacity=100);
	opacity: 1;
  }
</style>

2) Un problème d'infobulle également sous toutes versions d'Internet Explorer mais qui marche très bien sous Firefox
Voici le code utilisé (Je ne suis pas l'auteur du script Javascript) :

Le style :

<style type="text/css">
    .infobulle{
    position: absolute;
    visibility : hidden;
    border: 1px solid Black;
    padding: 10px;
    font-family: Verdana, Arial;
    font-size: 10px;
    background-color: #FFFFCC;
    }
</style>

Le Script :

    
<script language="javascript" type="text/javascript">
    <!--
    function GetId(id)
    {
    return document.getElementById(id);
    }
    var i=false;
     
    function move(e) {
    if(i) { 
    if (navigator.appName!="Microsoft Internet Explorer") { 
    GetId("curseur").style.left=e.pageX + 5+"px";
    GetId("curseur").style.top=e.pageY + 10+"px";
    }
    else { 
    if(document.documentElement.clientWidth>0) {
    GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
    GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
    }
    else {
    GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
    GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
    }
    }
    }
    }
     
    function montre(text) {
    if(i==false) {
    GetId("curseur").style.visibility="visible"; 
    GetId("curseur").innerHTML = text; 
    i=true;
    }
    }
    function cache() {
    if(i==true) {
    GetId("curseur").style.visibility="hidden"; 
    i=false;
    }
    }
    document.onmousemove=move; 
    //-->
</script>

Dans le BODY :

<div id="curseur" class="infobulle"></div>

Script dans la balise :

<span class="titre" style="cursor:pointer;" onmouseover="montre('<center><b>Le comité des fêtes</b>est heureux de vous présenter le programme<br />de la fête 2012<br /><br /><img src=2012/Orchestre2.jpg /></center>');" onmouseout="cache();">PROGRAMME</span><br />

En plus du Background général, j'ai un tableau avec un arrière-plan :

<table align="center" width="700" border="1">
  <tr>
    <td align="center" style="background-image:url(2012/background.jpg); background-color:#ffffff; filter:alpha(opacity=100); opacity: 1;">

Et, là, les infobulles sont "coincées" entre les deux background...
...Je ne sais pas si je m'explique bien.
J'ai tenté de faire jouer des transparence d'arrière-plan, mais il y a ensuite d'autres soucis toujours sur IE



Une idée, svp ?

Merci d'avance de toute aide

@+

PS : Si vous le souhaitez, j'ai mis une page temporaire en ligne...
.
Modifié par Jason (27 May 2012 - 16:01)

Salut,

pour ton problème de background tu peux essayer ça :

  body {
	background:url(2012/fondecran10.jpeg) no-repeat top left;
	display: block;
	height: 100%;
	filter:alpha(opacity=100);
	opacity: 1;
  }

Bonjour,

Merci pour ta réponse.

Ceci dit, c'est juste un "regroupement" d'info...

Normalement c'est background-image:url et non pas background:url

@+