Problème avec Mootool et CSS

Bonjour,

Je travaille actuellement sur le framework Mootools ( http://demos.mootools.net/ )

J'essaye de mettre à ma sauce l'effet Accordion : http://demos.mootools.net/Accordion

Mon lien : http://supercanard.phpnet.org/thewinterdesign2008/

Sur Firefox PC, pas de problèmes, sous Firefox 3B Mac j'ai un gros problème par contre.
Les texte situés dans les blocks gris clair n'apparaissent pas en entier, ils sont rognés. Visuellement on pourrait dirait dire que le block gris ne s'ouvre pas entièrement.
J'ai pensé à des problèmes de padding, j'ai essayé de forcer avec overflow:hidden, de mettre une taille fixe au div mais rien n'y fait...

#accordion {
/*border: 1px solid #ccc;*/
}
#accordion h2 {
cursor: pointer;
font-size: 14px;
margin: 0;
padding: 15px;
background: url("img/bg_h2.jpg");
border-bottom: 1px solid #ccc;
}
#accordion h3 {
font-size: 12px;
}
#accordion ul {
list-style-position: inside;
margin-left: 0;
padding-left: 0;
font-size: 12px;
}
#accordion p {
font-size: 12px;
}
div.atStart {
padding: 15px;
background: #ccc;
}

<div id="accordion">
<h2 class="toggler atStart">Présentation</h2>
<div class="element atStart">
<p>Test</p>
</div> 
<h2 class="toggler atStart">Parcours</h2>
<div class="element atStart">
<h3>Mai 2004 à Février 2008</h3>
<p>blabla</p>
</div>
<h2 class="toggler atStart">Formation</h2>
<div class="element atStart">
<h3>2002 à 2003</h3>
<p>Infographie / Multimédia / 3D - Aries (38)</p>
</div>

<h2 class="toggler atStart">Compétences</h2>
<div class="element atStart">
<ul>
<li>Langages XHTML et CSS</li>
<li>Maitrise des outils graphiques</li>
<li>Notions : PHP, 3D Studio Max</li>
</ul>
</div>