Div superpuesto no funciona en firefox ni en chrome Buenos dias chicos, espero que esten bien.
Estoy tratando de hacer una pag web con el estilo "metro" en el que a los lados de la pantalla hay dos "botones" superpuestos al contenido de la pantalla, los cuales te permiten hacer una especie de scroll un ejemplo aqui
http://www.microsoft.com/france/mstechdays/programmes/parcours.aspx#DomID=7c2234f7-3384-481e-9f7c-fd3510203028&fbid=5UigVbkEyrK
los botones los logre hacer con un div con pocision absolute el cual me permite mantener este fijo y el contenido que esta abajo se mueve.
El problema esta en cuando tengo un contenido dinamico IE me deja utilizarlo de maravillas pero en chrome y en firefox el div actua como especie de velo que no me permite manipular lo que este debajo.
¿Tienen alguna idea de cual pueda ser la solucion?
Aqui les dejo el css
#contenedor div
{
float:left;
width:33%
}
#contenedor
{
height:450px;
width:100%
}
#botones
{
position:absolute;
height:450px;
width:100%;
}
#botones div.boton
{
height:100%;
width:10%;
background:#cccccc;
opacity:0.5;
filter: alpha(opacity=50);
}
#botones div.centro
{
height:100%;
width:80%;
}
#botones div
{
float:left;
}
y aqui el html
<div id="principal">
<div id="botones">
<div class="boton" id="boton_iz"><input id="Button1" type="button" value="button" /></div>
<div class="centro"></div>
<div class="boton" id="boton_de"><input id="Button2" type="button" value="button" /></div>
</div>
<div id="contenedor">
<div id="home">
<table align="center" cellpadding="2" cellspacing="2">
<tr>
<td class="style1"> </td>
<td rowspan="4">
<table style="width:100%; margin-left: 122px;">
<tr>
<td class="style2" colspan="2">
<label class="cabecera">Registro Usuario</label></td>
<td>
</td>
</tr>
<tr>
<td class="style3">
<a>Datos Usuario</a></td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td class="style3">
Nombre</td>
<td>
Cédula</td>
<td>
</td>
</tr>
<tr>
<td class="style3">
<input type="text" class="cajas" id="txtNombre" /></td>
<td>
<input type="text" class="cajas" id="txtCedula" /></td>
<td>
</td>
</tr>
<tr>
<td class="style3">
Apellido</td>
<td>
Correo</td>
<td>
</td>
</tr>
<tr>
<td class="style3">
<input type="text" class="cajas" id="txtApellido" /></td>
<td>
<input type="text" class="cajas" id="txtCorreo" /></td>
<td>
</td>
</tr>
<tr>
<td class="style3">
Contraseña</td>
<td>
Repita Contraseña</td>
<td>
</td>
</tr>
<tr>
<td class="style3">
<input type="text" class="cajas" id="txtContraseña" /></td>
<td>
<input type="text" class="cajas" id="txtRepContraseña" /></td>
<td>
</td>
</tr>
<tr>
<td class="style3">
<input type="submit" id="Crear" class="boton_principal" value="Guardar"/></td>
<td>
<input type="submit" id="Cancelar" class="boton_principal" value="Cancelar"/></td>
<td>
</td>
</tr>
<tr>
<td class="style3">
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td class="style1"> </td>
<td> </td>
</tr>
<tr>
<td class="style1"> </td>
<td class="amarillo"> </td>
</tr>
<tr>
<td class="style1"> </td>
<td class="azul"> </td>
</tr>
</table>
</div>
</div>
