Pourquoi mon texte qui se déroule partout sauf sur ie 7 et 9 ???

Bonjour,

j'ai un texte qui se déroule et qui fonctionne partout sauf sur ie 7 et 9, quelqu'un serait pourquoi svp ?


voici le script :
function toggleVisibility(tagId) {
if (!document.getElementById) {
msg = 'Votre navigateur est trop ancien pour profiter de votre visite\n';
msg += 'Veuillez le mettre à jour ou vous en procurer un autre';
return false;
}
var tagToToggle;
try {
tagToToggle = document.getElementById(tagId);
} catch (e) {
alert('Je n\'ai pas pu trouver la balise cible');
}
try {
if (tagToToggle.style.display == 'none') {
tagToToggle.style.display = 'inline';
} else {
tagToToggle.style.display = 'none';
}
} catch (e) {
}
// Pour IE
if (tagToToggle.style.visibility == 'hidden') {
tagToToggle.style.visibility = 'visible';
} else {
tagToToggle.style.visibility = 'hidden';
}
}


voici mon code :
<div class="background-titre-deroule"> <a href="javascript:toggleVisibility('texte1')"> Offre </a> </div>
<div id="texte1" style="visibility: hidden; display: none;">
<span class="titre18Bleu">Nemo enim ipsam</span> <br />
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>


voici ma css :
.background-titre-deroule{
font-family:Helvetica, Arial, sans-serif;
text-transform:uppercase;
font-size:14px;
height:40px;
margin:5px 0px 0px 0px;;

}

.background-titre-deroule a{
display:block;
color: #fff;
text-decoration:none;
font-weight:bold;
background-image:url(../img-contenu-site-entreprise/background-titre-deroule.jpg);
background-position:top left ;
background-repeat:no-repeat;
line-height:2em;
padding:0px 10px;
}

.background-titre-deroule a:hover{
display:block;
background-image:url(../img-contenu-site-entreprise/background-titre-deroule-off.jpg);
background-position:top left;
padding:0px 10px;
color: #666;
}