<head>
<!--<script type="text/javascript" src="Scripts/unitpngfix/unitpngfix.js"></script>-->
<!--<script type="text/javascript" src="Scripts/iepngfix_v2/iepngfix_tilebg.js"> </script>-->
<!--[if lt IE 7]>
<script src="Scripts/ie7/IE7.js" type="text/javascript"></script>
<![endif]-->
<style type="text/css">
<!--
/*#container-med { behavior: url('Scripts/iepngfix_v2/iepngfix.htc') }*/
body {
background-color: #FFFFFF;
text-align:center;
}
#wrapper {
text-align: left;
margin: auto;
width: 950px;
}
#container {
overflow: hidden;
width: 950px;
height: auto;
min-height: 862px;
position:relative;
}
#container-top, #container-med, #container-bot {
position:absolute;
}
#container-top {
width: 950px;
height: 391px;
top: 0;
background: url(images/top-trans.png) no-repeat;
}
#container-med {
width: 950px;
top: 391px;
bottom: 439px;
background: url(images/med-trans.png) repeat-y;
}
#container-bot {
width: 950px;
height:439px;
bottom: 0;
background: url(images/bot-trans.png) no-repeat;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="container-top"></div>
<div id="container-med"></div>
<div id="container-bot"></div>
</div>
</div>
</body>
</html>
Veréis que la capa "container-med" la he definido a través de las propiedades top y bottom, ya que en función del contenido, esta capa variará de altura. Como ya adivinaréis, este código funciona correctamente en todos los navegadores... excepto en el IE (como no). A través de las librerías javascript IE7.js/IE8.js se consigue que el explorer "aprenda" entre otras cosas a reconocer capas definidas con las propiedades top y bottom, además los pngs de 24 bits se muestran correctamente en IE6. Lo que no admiten esas librerías es la opción background repeat. He probado a usar de forma conjunta otros scripts como "unitpngfix" o "iepngfix" que sí admiten el repeat pero parece ser que entran en conflicto y anulan la librería IE7.js perdiendo la opción de definir capas mediante top y bottom... ¿Alguien sabe cómo solucionar esto? He estado pensando y aunque no es lo que quiero, me conformaría con que en vez de repeat-y, la imagen tuviera el height al 100%, es decir, poner dentro del div: <img src="images/med-trans.png" width="950" height="100%" /> pero tampoco lo admite el Explorer, ¡ni siquiera la versión 7! ¡Socorroooo!
