Buenos dias,
A ver si alguien puede decirme que hago mal,
Tengo una tabla con dos filas y dos celdas contenida en un div
Código:
<div class="menu_box">
<table>
<tr>
<td><img src="styles/images/new.png" class="ticket_button"></td>
<td><img src="styles/images/inbox.png" class="inbox_button"></td>
</tr>
<tr>
<td><img src="styles/images/profile.png" class="profile_button"></td>
<td><img src="styles/images/contact.png" class="contact_button"></td>
</tr>
</table>
</div>
Ademas, una hoja de estilos CSS
Código:
.menu_box{
background-color: white;
position:absolute;
top:30%;
left: 10%;
width: auto;
height: 36.5%
}
.menu_box table{
height: 100%;
width: 100%;
}
.menu box td{
display: block;
width:auto;
height: 13%;
}
.ticket_button{
width: auto;
height: auto;
}
.profile_button {
width: auto;
height: auto;
}
.inbox_button {
width: auto;
height: auto;
}
.contact_button {
width: auto;
height:auto;
}
Las imagenes son mas altas que anchas ademas, quiero que segun la resolucion se redimensionen proporcionalmente, de ahi el "auto" de las imagenes y el del div "menu_box".
El tema es que cuando disminuyo la resolucion de 1280x1024 a 1024x768 las imagenes deberian de verse mas pequeñas adaptandose al nuevo tamaño de la celda que es en alto el 13% de la tabla que esta a su vez es el 100% del alto del div ,pero lo ignora totalmente.
Igual lo estoy mareando mucho
Muchas gracias por adelantado