Cajas flotantes y borde: IE se resiste

[RickAR]

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:

<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:

<div class="slidcontent">
        <div class="slide1">
        <a href="/images/1654.jpg" rel="slidcontent-slide1" title="TEXTOTEXTOTEXTO">
<img src="/images/min1654.jpg" style="border: none;margin: 0;padding: 0;" />
</div>      
        <div class="slide1">
<a href="/images/1656.jpg" rel="slidcontent-slide1" title="TEXTOTEXTOTEXTO">
<img src="/images/min1656.jpg" style="border: none;margin: 0;padding: 0;" />
</div>      
        <div class="slide1">
<a href="/images/1660.jpg" rel="slidcontent-slide1" title="TEXTOTEXTOTEXTO">
<img src="/images/min1660.jpg" style="border: none;margin: 0;padding: 0;" />
</div>      
        <div class="slide1">
<a href="/images/2413.jpg" rel="slidcontent-slide1" title="TEXTOTEXTOTEXTO">
<img src="/images/min2413.jpg" style="border: none;margin: 0;padding: 0;" />
</div>
        <div class="slide1">
<a href="/images/2682.jpg" rel="slidcontent-slide1" title="TEXTOTEXTOTEXTO">
<img src="/images/min2682.jpg" style="border: none;margin: 0;padding: 0;" />
</div>      
        <div class="slide1">
<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">
        <div class="slide1">
        <a href="/images/1654.jpg" rel="slidcontent-slide1" title="TEXTOTEXTOTEXTO">
<img src="/images/min1654.jpg" style="border: none;margin: 0;padding: 0;" />
</div>      
        <div class="slide1">
<a href="/images/1656.jpg" rel="slidcontent-slide1" title="TEXTOTEXTOTEXTO">
<img src="/images/min1656.jpg" style="border: none;margin: 0;padding: 0;" />
</div>      
        <div class="slide1">
<a href="/images/1660.jpg" rel="slidcontent-slide1" title="TEXTOTEXTOTEXTO">
<img src="/images/min1660.jpg" style="border: none;margin: 0;padding: 0;" />
</div>   
</div>
 

El CSS:

Código CSS:

.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 :)