tres columnas con imagenes con link

[craperos]

Hola comunidad, logre poner tres columnas y cada una lleva una imagen propia y un link con texto.

El problema es que en internet explorer me rompe el estilo
y lo pone en cascada
pero en firefox no:



No se que habre hecho mal pero no se porque tambien algunos enlaces se rompen y usan los enlaces de estas tres columnas.

Vi que hay un efecto transparent overlay que cuando pasas el mouse por arriba se expande. como tiene esta pagina:

http://www.eldia.com.ar/

me gustaria lograr algo parecido


HTML:

Código:

	<div id="wrapperr">
	     <div class="left1">
			<div style="background: url('http://assets.psicofxp.net/img/portada/ef9723fa51.jpg') no-repeat scroll 0 0 transparent;height:200px;width:300px; margin-top:1px;margin-bottom:-100px;"></div>
			  <div class="layover" style="z-index:1;filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60">
			    <h3 style="font-size:18px; font-weight:bold; padding-left:12px; display:inline"><a href="http://laplatapolitica.com.ar/viewforum.php?f=7" style="color:white;">Chavez asumiria cuando mejore.</h3>
			  </div>
	     </div>

	     <div class="left2">
			<div style="background: url('http://www.clarin.com/politica/Tierra-Imagen-Fragata-Libertad-Quedo_CLAIMA20130109_0020_24.jpg') no-repeat scroll 0 0 transparent;height:200px;width:300px; margin-top:1px;margin-bottom:-100px;"></div>
			  <div class="layover" style="z-index:1;filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60">
			    <h3 style="font-size:18px; font-weight:bold; padding-left:12px; display:inline"><a href="http://laplatapolitica.com.ar/viewforum.php?f=7" style="color:white;">Chavez asumiria cuando mejore.</h3>
			  </div>
	     </div>

	     <div class="left3">
			<div style="background: url('http://www.clarin.com/mundo/Apoyo-Partidarios-Chavez-Cuba-AP_CLAIMA20130109_0036_25.jpg') no-repeat scroll 0 0 transparent;height:200px;width:300px; margin-top:1px;margin-bottom:-100px;"></div>
			  <div class="layover" style="z-index:1;filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60">
			    <h3 style="font-size:18px; font-weight:bold; padding-left:12px; display:inline"><a href="http://laplatapolitica.com.ar/viewforum.php?f=7" style="color:white;">Chavez asumiria cuando mejore.</h3>
			  </div>
	     </div>

	 </div>

CSS:

Código:

.left1{
   position: relative;
   float: left;
   left: 5px;
   width: 300px;
   height: 200px;
   background-image: url("{T_THEME_PATH}/images/bg_header.png");
   background-color: #828282
   text-align:center;
}
.left2{
   position: relative;
   float: left;
   left: 15px;
   width: 300px;
   height: 200px;
   background-image: url("{T_THEME_PATH}/images/bg_header.png");
   background-color: #828282
}
.left3{
   position: relative;
   float: left;
   left: 25px;
   width: 300px;
   height: 200px;
   background-image: url("{T_THEME_PATH}/images/bg_header.png");
   background-color: #828282
}

.layover{
    height: 90px;
    position: relative;
    padding-top: 10px;
    width: 300px;
    color: #828282;
   	background-color: #000000
}

#wrapperr{
   position: relative;
   float: left;
   left: 0px;
   min-width: 650px;
   width: 950px;
   margin-bottom: 15px;
   background-color: #ffffff
}