Comment la position 2 par rapport divs les uns sur les autres/en haut d'une propriété css diffère selon les navigateurs, avec les css de sorte qu'ils apparaissent de la même dans tous les navigateurs?

J'ai les éléments div suivants:

<div id="banner1">   
    <div id="whiteout"></div>
    <div id="banner2"></div>    
</div>

J'ai besoin: le "voile blanc" élément à apparaître directement sur le dessus de la "banner1" et " banner2 et de l'avoir à l'écran la même dans tous les navigateurs (actuellement Firefox et IE semblent avoir du mal à les afficher correctement même si le sommet d'une propriété css est en pixels) -
sinon, quelqu'un pourrait-il me dire comment afficher 2 par rapport divs les uns sur les autres?

Actuellement, mon css est comme suit:

div#banner1 {    
    width: 100%;
    height: 140px;
    background-image: url( "images/banner/1.png" );
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-collapse: collapse;    
}

div#banner2 {   
    width: 100%;
    height: 140px;
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-collapse: collapse;    
}

div#whiteout {    
    border: 1px solid black;
    width: 500px;
    height: 140px;
    background-image: url( "images/whiteout.png" );
    background-position: left center;
    background-repeat: no-repeat;
    border-collapse: collapse;
    position: absolute;
    z-index: 1;
    display: block;
    top: 50px;   
}

Merci sincèrement pour toute aide ou suggestion! 🙂

Piotr.