Foros del Web - Ver Mensaje Individual

IsaBelM · #1 (**permalink**) 26/11/2014, 16:38

no sé por qué razón en ie y opera no alinea verticalmente la imagen de la izquierda

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8">
<title></title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: none;
    position: relative;
}



html {
    width: 100%;
    height: 100%;
}



body {
    font-size: 100%;
    width: 100%;
    min-height: 100%;
    height: auto !important;
    background-color: rgb(244, 244, 243);
    overflow-y: hidden;
}


div#contenedor {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding-bottom: 40px;
}


ul#list-opc {
    width: 70%;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}



ul#list-opc > li {
    height: 16em;
    line-height: 16em;
    background-color: rgb(244, 244, 243);
    border: 1px solid rgb(219, 218, 218);
    border-top: 1px solid rgb(155, 151, 151);
    display: none;
}



ul#list-opc > li > img {
    width: auto;
    max-height: 14em;
    max-width: 20em;
    vertical-align: middle;
    padding-left: 1%;
}


ul#list-opc > li.mostrar {
    display: list-item;
}


div.leyenda {
    width: 50%;
    height: 90%;
    float: right;
    top: 5%;
    right: 1%;
    background-color: rgb(244, 242, 242);
    color: rgb(166, 62, 62);
    font: bold .8em Verdana;
    border-radius: 10px 0 0 10px;
}


div.leyenda > div {
    margin: 1% .5% 1% 2%;
}

div.leyenda > div > span {
    width: 30%;
    display: inline-block;
    color: rgb(92, 87, 87);
}


div.leyenda > div.miniImagen {
    margin: 10% .5% 0 2%;
    padding-top: 1%;
    border-top: 1px solid rgb(179, 177, 177);
}


div.leyenda > div.miniImagen > span.enunciado {
    display: block;
    clear: both;
    width: 100%;
}


div.leyenda > div.miniImagen > img.med {
    width: auto;
    max-height: 5em;
    border: 2px solid rgb(189, 184, 184);
}


div.leyenda > div.miniImagen > img.big {
    width: auto;
    max-height: 6em;
    margin: 3% 0 0 4%;
    border: 2px solid rgb(189, 184, 184);
}
</style>
</head>
<body>

<div id="contenedor">
    <ul id="list-opc">
        <li class="mostrar">
            <img src="https://775f7d4eb506969d656e8adf49d8a338d226ad15.googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/IsabelM/img/minecraft2.jpg">
            <div class="leyenda">
            <div>
                <span>Título</span> Uno cualquiera</div>
                <div><span>Álbum</span> Uno cualquiera</div>
                <div><span>Duración</span> 300 segundos</div>
                <div class="miniImagen">
                    <span class="enunciado">Otras Referencias</span>
                    <img class="med" src="https://775f7d4eb506969d656e8adf49d8a338d226ad15.googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/IsabelM/img/minecraft2.jpg">
                    <img class="big" src="https://775f7d4eb506969d656e8adf49d8a338d226ad15.googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/IsabelM/img/minecraft2.jpg">
                </div>
            </div>
        </li>
        <li class="mostrar">
            <img src="https://775f7d4eb506969d656e8adf49d8a338d226ad15.googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/IsabelM/img/inocente.jpg">
            <div class="leyenda">
            <div>
                <span>Título</span> Uno cualquiera</div>
                <div><span>Álbum</span> Uno cualquiera</div>
                <div><span>Duración</span> 300 segundos</div>
                <div class="miniImagen">
                    <span class="enunciado">Otras Referencias</span>
                    <img class="med" src="https://775f7d4eb506969d656e8adf49d8a338d226ad15.googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/IsabelM/img/inocente.jpg">
                    <img class="big" src="https://775f7d4eb506969d656e8adf49d8a338d226ad15.googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/IsabelM/img/inocente.jpg">
                </div>
            </div>
        </li>
    </ul>
</div>


</body>
</html>

gracias