Tengo una pagina que esta corriendo un lightbox con jquery.
Para que el LB funcione debo ejecutar en el head un meta de compatibilidad IE7
Código HTML:
Ver original<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
pero esto me desordena las cajas que contienen los thumbs para abrir las imagenes con el LB.
Entonces o quito el metatag y no corre el LB, o lo dejo y me queda como quiere el IE (y no yo) la maqueta... O sea, despues de cada grupo de DIV de cajas flotantes contenidas en un DIV con borde, el IE me agrega abajo una capa, semejante al DIV contenedor, pero vacia, o sea, sin las cajas flotantes... ESTO NO LO HACEN NI OPERA NI FF NI SAFARI NI CHROME...
Hice todos los cambios posibles en los DIV (id o class), puse clear:both, position:relative o static, quite los floats, etc etc (ya ni me acuerdo), pero el IE no responde.
Hay algun modo de dominar este problema? O sea, de que IE respete el orden dado??
Aclaro en el Opera, FF, Safari y Chrome esa maqueta funciona tal como quiero y dice el codigo correcto... Pero no encuentro el truco con IE.
Porrrrrr favor alguna ayuda???
El HTML es semejante a éste (esta en desarrollo y no tengo link):
Código HTML:
Ver original<div class="slidcontent"> <a href="/images/1654.jpg" rel="slidcontent-slide1" title="TEXTOTEXTOTEXTO"> <img src="/images/min1654.jpg" style="border: none;margin: 0;padding: 0;" /> <a href="/images/1656.jpg" rel="slidcontent-slide1" title="TEXTOTEXTOTEXTO"> <img src="/images/min1656.jpg" style="border: none;margin: 0;padding: 0;" /> <a href="/images/1660.jpg" rel="slidcontent-slide1" title="TEXTOTEXTOTEXTO"> <img src="/images/min1660.jpg" style="border: none;margin: 0;padding: 0;" /> <a href="/images/2413.jpg" rel="slidcontent-slide1" title="TEXTOTEXTOTEXTO"> <img src="/images/min2413.jpg" style="border: none;margin: 0;padding: 0;" /> <a href="/images/2682.jpg" rel="slidcontent-slide1" title="TEXTOTEXTOTEXTO"> <img src="/images/min2682.jpg" style="border: none;margin: 0;padding: 0;" /> <a href="/images/2710.jpg" rel="slidcontent-slide1" title="TEXTOTEXTOTEXTO"> <img src="/images/min2710.jpg" style="border: none;margin: 0;padding: 0;" /> </div><span style="margin: 40px 0 0 5px;width: 720px;">El andamiaje, montado en
<i>voladizo
</i>, fue una obra de alta complejidad, soportada por estructuras colocadas en pasillos perimetrales
</span></div> <div class="slidcontent"> <a href="/images/1654.jpg" rel="slidcontent-slide1" title="TEXTOTEXTOTEXTO"> <img src="/images/min1654.jpg" style="border: none;margin: 0;padding: 0;" /> <a href="/images/1656.jpg" rel="slidcontent-slide1" title="TEXTOTEXTOTEXTO"> <img src="/images/min1656.jpg" style="border: none;margin: 0;padding: 0;" /> <a href="/images/1660.jpg" rel="slidcontent-slide1" title="TEXTOTEXTOTEXTO"> <img src="/images/min1660.jpg" style="border: none;margin: 0;padding: 0;" />
El CSS:
Código CSS:
Ver original.slidcontent {
float:left;
position: relative;
left: 33px;
width: 920px;
border: 2px groove #F0D52D;
text-align:center;
}
.silde1 {
float: left;
width: auto;
height: 123px;
margin: 1px;
border: none;
}
.slidcontent span {
float: left;
font-family: Blackchancery;
font-size: 20px;
color: #663300;
text-align: center;
vertical-align: center;
height: auto;
background-color: #cccccc;
filter: alpha(opacity=60); /* here you can set the opacity of box with text */
-moz-opacity: 0.6; /* here you can set the opacity of box with text */
-khtml-opacity: 0.6; /* here you can set the opacity of box with text */
opacity: 0.6; /* here you can set the opacity of box with text */
color: #000;
}
Gracias :)