Comportement JS sur Firefox bon, mauvais sur IE7, Safari et Opéra!

Bonjour,

Le mieux est de visualiser le problème: http://www.evonz.fr/fclioujas/fclioujas.php
Il s'agit d'un site de club de foot (comme vous avez pu le deviner ).
Mon souci provient de l'affichage des divers classements (juste sous FC Lioujas).
Sous Firefox le comportement est celui que je désire. Lors du clic sur "Séniors 1", "Féminines 1" ou "Féminines 2" un DIV HIDDEN apparaît et décale le reste de la colonne centrale.

Par contre, sous IE7, Safari et Opéra, cette même DIV apparait, mais derrière l'image ou le texte. Le reste des news ne se décale pas vers le bas!

Voici le code Javascript, CSS et HTML de la page que j'appellerai: classement.php

<script language="javascript">
function request(url,cadre) {
	var XHR = null;
	if(window.XMLHttpRequest) 
		XHR = new XMLHttpRequest();
	else if(window.ActiveXObject) 
		XHR = new ActiveXObject("Microsoft.XMLHTTP");
	else { 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
		return;
	}
	XHR.open("GET",url, true);
	XHR.onreadystatechange = function attente() {
	if(XHR.readyState == 4){
	document.getElementById(cadre).innerHTML = XHR.responseText;
	document.getElementById("rate").style.visibility="visible";
   }
	}
	XHR.send(null);		
	return;
}
</script>
<style type="text/css">
<!--
#head_rk {
	padding: 0px;
	width: 420px;
	background-image: url(img_dsgn/ranking.jpg);
	background-repeat: no-repeat;
	background-position: center;
	height: 72px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#rank {
	margin-top: 50px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
	padding: 0px;
}
#list_rk {
	list-style-image: none;
	list-style-type: none;
	height: 22px;
	width: 400px;
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	color: #FFFFFF;
}
#list_rk li {
	width: 80px;
	height: 20px;
	text-align: center;
	float: left;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FFFFFF;
	border-right-color: #CCCCCC;
	border-bottom-color: #666666;
	border-left-color: #999999;
	background-image: url(img_dsgn/ratedzg.jpg);
}
#list_rk #down {
	background-image: url(img_dsgn/ratedzg_dw.jpg);
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-color: #FFFFFF;
	border-right-color: #999999;
	border-bottom-color: #666666;
	border-left-color: #999999;
}
#list_rk li a {
	color: #FFFFFF;
	text-decoration: none;
}
#list_rk #down a {
	height: 20px;
	width: 80px;
	display: block;
}
#rate {
	
}

.poule {
	font-size: 1em;
	color: #FFFFFF;
	text-indent: 15px;
}
-->
</style>
<div id="head_rk">
	<div id="rank">
		<ul id="list_rk">
			<li id="senone"><a href="" onclick="request('rating.php?rk=senone','rate');return(false)">Séniors 1</a></li>
			<li id="femone"><a href="" onclick="request('rating.php?rk=femone','rate');return(false)">Féminines 1</a></li>
			<li id="femtwo"><a href="" onclick="request('rating.php?rk=femtwo','rate');return(false)">Féminines 2</a></li>
			<li id="down"><a href="" onclick="request('rating.php?rk=down','rate');return(false)"></a></li>
		</ul>
		<div id="rate">	
		</div><!--#rate-->
	</div><!--#rank-->
</div><!--#head_rk-->

Voici rating.php

<?php
	if($_GET['rk'] == "senone"){
		echo'<div class="poule">Promotion de 1&egrave;re Poule C</div>';
		include ('../../parsing.php');
	}elseif($_GET['rk'] == "femone"){
		echo'<div class="poule">Division d\'Honneur Ligue</div>';
		include ('../../parsing.php');
	}elseif($_GET['rk'] == "femtwo"){
		echo'<div class="poule">Excellence District</div>';
		include ('../../parsing.php');
	}elseif($_GET['rk'] == "down"){
	 echo'';
	}
?>

parsing.php n'est que la mise ne page des tableaux.

Mon classement est inclus comme ceci:

<style type="text/css">
<!--
#mainContent {
	margin-top: 0;
	margin-right: 24%;
	margin-bottom: 0;
	margin-left: 23.5%;
}
.gapp {
	margin: 0px;
	padding: 0px;
	height: 50px;
	width: 100%;
	float: left;
}
.news {
	margin: 0px;
	padding: 0px;
	width: 100%;
}
-->
</style>
...
<div id="mainContent">
 <div class="gapp"></div>
include('classement.php');
// à cet endroit la page main.php qui gère l'affichage des news
include('main.php');
//les news sont dans une DIV <div class="news">...</div>
</div>