расширение / сворачивание div с флажком в IE

http://jsfiddle.net/EWH8E/

У меня есть несколько страниц, которые содержат скрытый контент, который открывается, когда флажок "отмечен" и снова скрыт, когда "отключен". Все работает отлично в Chrome и FF, но я либо получаю содержание, всегда показывающее или скрытое, но флажок не работает в IE. Я использую Ie8, но пробовал и в 9, и то же самое происходит. ЛЮБЫЕ предложения о том, как заставить его работать? В главе заголовка HTML я включил следующее, чтобы противодействовать использованию элемента статьи.

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Теперь вот код PHP

echo "<div class=\"resultsContainer\">";

echo "Последние результаты

            <article class=\"small\">

            <table class=\"results\">";



$query2=$database->query("SELECT team_name, team_score, opposition_score,
opposition_name from results_a ORDER BY updated DESC LIMIT 0, 5");
$i=0;
while ($row2=$query2->fetch(PDO::FETCH_NUM)) {
echo ($i %2 == 0)? "<tr class=\"stripe\">" : "<tr class=\"nostripe\">";
printf ("<td>%s<td class=\"small\">%s<td class=\"small\">%s<td>%s</tr>", 
$row2[0],$row2[1], $row2[2], $row2[3]);
$i++;
}
echo "</table>";
echo "</article>";
echo "</div>";

И CSS

.resultsContainer  article {
background:white ; 
overflow:hidden ; 
height: 0px ; 
position: relative ; 
z-index:10}

.resultsContainer  input:checked ~ article.small {
height:100% ; 
width: 100% }

.results {text-align: center ; 
table-layout:fixed ; 
margin-left: 0 ; 
margin-right: 0 ; 
padding-top:0.7em ; 
width: 65% ; 
color:#0431B4 }