Problemas de compatibilidad con Chrome y Safari (capas se desbordan de su ubicación)

[Anartz]

Buenas tardes:

Pues ando aprendiendo sobre CSS y me ha aparecido un problema que no se como solucionarlo y me estoy comiendo bastante la cabeza con ello. El tema es que he probado esta mismo diseño en Mozilla Firefox y Opera, que al verse bien, está claro que debería de añadir a la hoja de estilos un "-webkit-..." ya que el problema de desbordamiento de capas div me viene con los navegadores Google Chrome y Safari.

El problema es este:



Quiero que se muestre de la siguiente manera, tal y como consigo dejarlo en Mozilla y Opera:



El Código HTML de ese recuadro general que tiene los bloques pequeños es el siguiente:

Código HTML:

<div id="bloque1">
                            <img src="img/youtube/youtube.png"></img>
                            <div id="cajacontenido">
                                    <div id="bloque1content">
                                        <a href="guias/ps3/acrevelations.html" target="_blank">
                                        <img src="img/youtube/acrevelations.png" title="Guía Assasins Creed Revelations: Todas las secuencias ADN"></img></a>
                                    </div>
                                    <div id="bloque1content">
                                        <a href="#" target="_blank">
                                        <img src="img/youtube/guialbp2.png" title="Guía Little Big Planet2"></img></a>
                                    </div>
                                    <div id="bloque1content">
                                        <a href="#" target="_blank">
                                        <img src="img/youtube/guiaaabrotherhood.png" title="Guía Assassins Creed La Hermandad: Todas las secuencias ADN"></img></a>
                                    </div>
                                    <div id="bloque1content">
                            </div>
                            </div>
                        </div> 

Y el CSS es el siguiente:

Código HTML:

#bloque1{margin:auto; width: 850px; height: 250px;background: green;
 -moz-border-radius:8px; -webkit-border-radius: 8px; -o-border-radius: 8px;
 -webkit-margin-start: auto;}
 
 #bloque1content{margin-top: 2px; margin-right: 2px; background: white; width: 290px; height: 60px; float:right; -webkit-margin-start: auto;
  }
 
 #cajacontenido{width: 294px; height: 250px; background: white; float:right; -webkit-margin-start: auto;}
 
 #bloque{margin: auto; float:left; width: 280px ;height: 110px; margin-top: 10px;margin-left: 5px;  
 font: 12px Arial, Helvetica, sans-serif;text-align: left;  }
 
 #bloque h1{margin:auto; padding:auto; float: left; background: #39F;color: white;}

Está claro que es algo de sobre el webkit, pero no se que tengo que aplicar exactamente ni donde, he probado el tema del overflow, pero no cuela y con el hidden, pues como es lógico no aparece nada.


Por si se necesita más info, entrar en [URL="http://www.mugan86.com/youtube.html"]http://www.mugan86.com/youtube.html[/URL] con Mozilla Firefox y luego mirarlo con Chrome (o Safari mismo), para ver la diferencia y el error mio.

Saludos y gracias por el que me pueda ayudar :)