Overflow avec des éléments flottants

Bonjour,

j'ai un bloc qui contient des images en float:left et je veux placer une scrollbar sur le bloc global si j'en ai besoin.
Voici mon code :

HTML :

<div id="marques">
	<p><img src="images/logo_maserati.jpg" width="64" height="28" border="0" alt="" title="" style="margin-top: -14px;margin-left: -32px;" /></p>
	<p><img src="images/logo_maserati.jpg" width="64" height="28" border="0" alt="" title="" style="margin-top: -14px;margin-left: -32px;" /></p>
	<p><img src="images/logo_maserati.jpg" width="64" height="28" border="0" alt="" title="" style="margin-top: -14px;margin-left: -32px;" /></p>
	<p><img src="images/logo_maserati.jpg" width="64" height="28" border="0" alt="" title="" style="margin-top: -14px;margin-left: -32px;" /></p>
	<p><img src="images/logo_maserati.jpg" width="64" height="28" border="0" alt="" title="" style="margin-top: -14px;margin-left: -32px;" /></p>
	<p><img src="images/logo_maserati.jpg" width="64" height="28" border="0" alt="" title="" style="margin-top: -14px;margin-left: -32px;" /></p>
	<p><img src="images/logo_maserati.jpg" width="64" height="28" border="0" alt="" title="" style="margin-top: -14px;margin-left: -32px;" /></p>
	<p><img src="images/logo_maserati.jpg" width="64" height="28" border="0" alt="" title="" style="margin-top: -14px;margin-left: -32px;" /></p>
	<p><img src="images/logo_maserati.jpg" width="64" height="28" border="0" alt="" title="" style="margin-top: -14px;margin-left: -32px;" /></p>
	<p><img src="images/logo_maserati.jpg" width="64" height="28" border="0" alt="" title="" style="margin-top: -14px;margin-left: -32px;" /></p>
	<p><img src="images/logo_maserati.jpg" width="64" height="28" border="0" alt="" title="" style="margin-top: -14px;margin-left: -32px;" /></p>
	<p><img src="images/logo_maserati.jpg" width="64" height="28" border="0" alt="" title="" style="margin-top: -14px;margin-left: -32px;" /></p>
	<p><img src="images/logo_maserati.jpg" width="64" height="28" border="0" alt="" title="" style="margin-top: -14px;margin-left: -32px;" /></p>
	<p><img src="images/logo_maserati.jpg" width="64" height="28" border="0" alt="" title="" style="margin-top: -14px;margin-left: -32px;" /></p>
	<p><img src="images/logo_maserati.jpg" width="64" height="28" border="0" alt="" title="" style="margin-top: -14px;margin-left: -32px;" /></p>
	<p><img src="images/logo_maserati.jpg" width="64" height="28" border="0" alt="" title="" style="margin-top: -14px;margin-left: -32px;" /></p>
	<p><img src="images/logo_maserati.jpg" width="64" height="28" border="0" alt="" title="" style="margin-top: -14px;margin-left: -32px;" /></p>
	<p><img src="images/logo_maserati.jpg" width="64" height="28" border="0" alt="" title="" style="margin-top: -14px;margin-left: -32px;" /></p>
	<p><img src="images/logo_maserati.jpg" width="64" height="28" border="0" alt="" title="" style="margin-top: -14px;margin-left: -32px;" /></p>
	<p><img src="images/logo_maserati.jpg" width="64" height="28" border="0" alt="" title="" style="margin-top: -14px;margin-left: -32px;" /></p>
</div>

CSS

#marques{
float: right;
display: block;
width: 300px;
height: 92px;
overflow: hidden;
overflow-x: hidden;
overflow-y: auto;
overflow : -moz-scrollbars-vertical;
}

#marques p{
float: left;
position: relative;
width: 71px;
height: 46px;
}

#marques p img{
position: absolute;
left: 50%; 
top: 50%;
}

Cela fonctionne parfaitement sur FF, mais pas sur IE 6 et 7 et ni sur Opera 9

Merci de votre aide