2009-06-01 11 views
6

Estoy usando un complemento jQuery llamado "Cycle" y estoy teniendo problemas con el CSS en IE, se ve perfecto en Opera, FF, Chrome y Safari, pero IE está agrietando la SADS ..CSS, JQuery Cycle y IE issue

www [punto] photographicpassions [punto] com/home

verá el "último trabajo" en el lado derecho y las imágenes de abajo de la imagen principal, en FF, Safari, Chrome y Opera, el contenedor gris está detrás de todas las miniaturas, pero en IE, el fondo gris se detiene en la parte superior de las miniaturas ... He intentado varias cosas para que funcione, en vano ... ¿alguien podría ayudarme? ?

Aquí está el CSS para los recipientes que no están jugando agradable en el IE:

/* latest work container */ 
div#latestHolder { 
    position: relative; 
    float: left; width: 368px; 
    margin: 0px 0px 0px 0px; 
    padding: 10px 10px 10px 10px; 
    background-color: #666666; 
} 

/* thumbnails */ 
div#nav { 
    position: relative; 
    float: left; left: 0px; 
    width: 376px; 
    padding: 0px 0px 0px 0px; 
    margin: 1px 0px 0px 0px; 
} 
    div#nav li { 
     width: 66px; 
     float: left; 
     padding: 0px 0px 0px 0px; 
     margin: 9px 9px 0px 0px; 
     list-style: none; 
     cursor: pointer; 
    } 
    div#nav a { 
     padding: 3px; 
     display: block; 
     background: #404040; 
     cursor: pointer; 
    } 
     div#nav a.activeSlide { 
      background: #ffffff; 
      cursor: pointer; 
     } 
     div#nav a:focus { 
      outline: none; 
      cursor: pointer; 
     } 
    div#nav img { 
     width: 60px; 
     border: none; 
     display: block; 
     cursor: pointer; 
    } 

Si alguien me podría ayudar, eso sería fantástico !! :)

Respuesta

2

sólo tiene que utilizar overflow: hidden en sus contenedores. Por defecto, overflow: auto no hará crecer elementos para contener sus contenidos. Desbordamiento de configuración: oculto (o desbordamiento: auto ... bit con el que arriesga barras de desplazamiento no deseadas), obligará a sus divisiones de contenedor a expandirse a la altura de todos sus elementos secundarios ... elementos flotantes incluidos.

+0

Hmm Lo intenté, pero todavía no lo puedo conseguir para trabajar :( desbordamiento: el auto coloca las barras de desplazamiento alrededor del div y no lo expande a la altura de las miniaturas (que se extraen utilizando jquery) – SoulieBaby

+0

Debe usar el desbordamiento: oculto la mayor parte del tiempo. desbordamiento: automático para los momentos en que establezco un ancho y/o altura específicos y realmente quiero la barra de desplazamiento. Solo por curiosidad ... ¿qué versión de IE está teniendo el problema? ¿Es IE6? Creo que asumí IE7/8, pero IE6, como sin duda sabe, está plagado de errores. Si necesita compatibilidad con IE6, es posible que necesite hacer ambos desbordamiento: oculto y una división div. – jrista

+0

Hmm ... Me acabo de dar cuenta de que también has probado el div de compensación, y no funcionó. Tendré que echarle un vistazo a su sitio, que veo que ha publicado ... y espero poder resolver el problema. – jrista

1

El div #latestHolder se flota a la izquierda, lo que hace que be removed from the flow of the page. Intente utilizar la posición relativa/absoluta en lugar de float:left; o borrar el flotador antes de finalizar el div #mainContainer.

Compensación implicaría lanzar en un elemento en bloque al final de los #maincontainer div, así:

<div style="clear: both;"></div> 
+0

hmm Intenté eliminar float: left y también agregué el div claro, pero no cambió nada en IE y se volvió extraño en los otros navegadores ..:/ – SoulieBaby