Foros del Web » Creando para Internet » CSS »

Problema al agrandar div en IE6

Estas en el tema de Problema al agrandar div en IE6 en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/07/2010, 20:27
 
Fecha de Ingreso: enero-2009
Ubicación: Uruguay
Mensajes: 121
Antigüedad: 8 años, 11 meses
Puntos: 4
Problema al agrandar div en IE6

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{opacity1;}    
.
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',
                        
opacity1
                    
},
                    {
duration1000easing'easeOutBounce'});
                    
                }            
            },function(){
                if($(
this).find(".contenidoCod").width() > 520){                
                    $(
this).animate({
                        
width520,
                        
height: $(this).find(".contenidoCod").height(),
                        
left0,
                        
overflow'hidden',
                        
opacity.5
                    
},
                    {
duration1000easing'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.
  #2 (permalink)  
Antiguo 10/07/2010, 09:44
 
Fecha de Ingreso: enero-2009
Ubicación: Uruguay
Mensajes: 121
Antigüedad: 8 años, 11 meses
Puntos: 4
Respuesta: Problema al agrandar div en IE6

bueno despues de 2 horas tratando y tratando pude dar con la solucion.
Cree un tercer div padre de los 2 anteriores el cual es static, ademas el segundo div tambien lo pase a absoluto con jquery y ademas le di la altura del primer div a los otros 2.
Si alguien le gusta el efecto se lo paso.
Saludos

Etiquetas: agrandar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:46.