Salve devo realizzare una pagina con con 6 riquadri, ogni riquadro è formato da 2 div
strutturati in questa maniera:

codice:
div.trasparente {
    height:300px;
    weight:150px;
    padding:10px;
    border : 1px solid black; 
    background-color:black;
    filter:alpha(opacity=20);
    opacity: 0.30;
    -moz-opacity: 0.30;  
}
div.riquadro{
    height:300px;
    weight:150px;
    padding:10px;
    border:1px solid white;  
}
Sovrapponendo il div class=riquadro all'altro mi da un effetto trasparenza allo sfondo però il testo rimane in chiaro.
Il problema è che l'altezza massima della pagina è 485 px, però devo lasciare la possibilità di fare lo scroll per risoluzioni più basse alla 1024.
Il problema è che se abilito lo scroll, la pagina scorre sotto di parecchio considerando che in realtà i div stavano sotto e li ho spostati io per posizionarli, mostrando così una lunga pagina nera...
Ho provato a mettere i div all'interno di una tabella, però il problema è il medesimo.
L'uso del posizionamento con absolute mi crea problemi perchè devo allineare i riquadri in base alla pagina di fondo ed ho notato che l'absolute è interpretato diversamente da IE e Firefox, quando va bene in uno non va bene nell'altro...
Secondo voi come posso risolvere?

Grazie in anticipo.