Hola les cuento justo hoy se me dio por probar unas cosas que estoy poniendo en mi sitio y me encontre con un fallo bastante feo en ie6.
Les dejo un link para que lo puedan comprobar ustedes mismos:
http://www.spedevigner.com/cake/Noticias/view/17
Fijense en el segundo cuadro de codigo como funcion en firefox y como funciona en ie6.
van a ver que en ie6 cuando agrando el div este me estira toda la estructura.
les dejo parte de los codigos.
CSS
Código PHP:
.muestraCod{background-color:#D0ECEE;border:1px solid #BACED2;opacity: .5;width:520px;padding:10px;overflow-x:auto;overflow-y:hidden;position:relative;/* redondea las esquinas (como prefieras) */-moz-border-radius: 12px;-webkit-border-radius: 12px;}
.muestraCod:hover{opacity: 1;}
.contenidoCod{width:auto;white-space:nowrap;}
HTML
Código PHP:
<div class='muestraCod'>
<div class='contenidoCod'>Contenido Codigo</div>
</div>
JQUERY
Código PHP:
$(".muestraCod").hover(function(){
if($(this).find(".contenidoCod").width() > 520){
//saco una ecuacion para calcular y centrar el div
if(($(this).find(".contenidoCod").width()+10) > 770){
codeLeft = (($(this).find(".contenidoCod").width()+10) - 770) / 2;
}else{
codeLeft = 0;
}
//elimino cualquier otra animacion que haya en cola de espera
$(this).clearQueue();
$(this).animate({
width: $(this).find(".contenidoCod").width()+10,
height: $(this).find(".contenidoCod").height(),
left: -codeLeft,
overflow: 'hidden',
opacity: 1
},
{duration: 1000, easing: 'easeOutBounce'});
}
},function(){
if($(this).find(".contenidoCod").width() > 520){
$(this).animate({
width: 520,
height: $(this).find(".contenidoCod").height(),
left: 0,
overflow: 'hidden',
opacity: .5
},
{duration: 1000, easing: 'easeOutBounce'});
}
});
bueno lo que hago es simple con jquery al hacer hover sobre el div de codigo este se agranda hasta mostrar todo su contenido.
Quiero saber si alguien tiene alguna solucion para esto, lo raro de este problema es que parece que el que se comporta bien es ie6 ya que esta bien que choquen divs absolutos unos con otros.