Ver Mensaje Individual
  #1 (permalink)  
Antiguo 19/05/2011, 12:18
Avatar de Eddy Ramos
Eddy Ramos
 
Fecha de Ingreso: marzo-2004
Ubicación: Tuxtla Gutiérrez, Chiapas
Mensajes: 98
Antigüedad: 20 años, 1 mes
Puntos: 1
error con .show .hide y <div>

por primera vez notengo problemas con ie, ahora es el crome, firefox y safari.
Estoy manejando las capas con <div> para agrupar los contenidos, colocando los efectos de jquery .show .hide, para hacer un acordeon que se mueve de forma horizontal.
El problemas es que en los navegadores que mencioné el contenedor se baja y se coloca en la parte inferior
el ejemplo esta en
http://studiobuque.com/demo/acordeon/prueba-acorden.html

index.html
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <script src="script/jquery.js"></script>
  4. <script src="script/jquery-acordeon-1.1.js"></script>
  5.  
  6. </head>
  7.  
  8. <div class="grid_6 cuerpo">
  9.     <div style="display:block;">
  10.      
  11. <!--  Inicio -->
  12.         <div class="caja" id="caja_inicio">
  13.             <div class="caja_contenido" id="caja_cont_0">
  14.             <div class="entrada"">          
  15.  
  16. <!--  El texto aqui-->
  17.  
  18.             </div>
  19.             </div><!-- /caja_contenido -->
  20.         </div>
  21.        
  22. <!-- presentacion -->
  23.         <div class="caja" id="caja_presentacion">
  24.             <div class="caja_imagen">
  25.                 <a href="#" id="caja_img_1">
  26.                     <img id="caja_imagen_mostrar" src="img/boton.jpg" />
  27.                 </a>           
  28.             </div><!-- /caja_imagen -->
  29.             <div class="caja_contenido" id="caja_cont_1" style="">
  30.             <div class="entrada">
  31.  
  32. <!--  Mas texto aqui-->
  33.  
  34.             </div>
  35.             </div><!-- /caja_contenido -->
  36.         </div>
  37.        
  38. <!-- servicios -->
  39.         <div class="caja" id="caja_servicios">
  40.             <div class="caja_imagen">
  41.                 <a href="#" id="caja_img_2">
  42.                     <img id="caja_imagen_mostrar" src="img/boton.jpg" />                </a>            </div><!-- /caja_imagen -->
  43.             <div class="caja_contenido" id="caja_cont_2" style="">
  44.             <div class="entrada" >
  45.  
  46.             </div>
  47.             </div><!-- /caja_contenido -->
  48.         </div>
  49.        
  50. <!-- proyectos -->
  51.         <div class="caja" id="caja_proyectos">
  52.             <div class="caja_imagen">
  53.                 <a href="#" id="caja_img_3">
  54.                     <img src="img/boton.jpg" />
  55.                 </a>
  56.             </div><!-- /caja_imagen -->
  57.             <div class="caja_contenido" id="caja_cont_3" style="">
  58.             <div class="entrada" style=" padding-top:0px; overflow:hidden;">
  59.                
  60.             </div>
  61.             </div><!-- /caja_contenido -->
  62.         </div>
  63.        
  64. <!-- contacto -->
  65.         <div class="caja" id="caja_contacto" style="margin-top:20px;">
  66.           <div class="caja_imagen">
  67.                 <a href="#" id="caja_img_4">
  68.                     <img src="img/boton.jpg" />
  69.                 </a>   
  70.       </div><!-- /caja_imagen -->
  71.             <div class="caja_contenido" id="caja_cont_4" style="">
  72.             <div class="entrada">
  73.            
  74.             </div>
  75.             </div><!-- /caja_contenido -->
  76.         </div>
  77.     </div>
  78. </div><!-- /cuerpo -->
  79.  
  80. </body>
  81. </html>

jquery-acordeon-1.1.js
Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.    
  3.     $("#caja_img_1").click(function(event){
  4.        $("#caja_cont_0").hide("slow");
  5.        $("#caja_cont_2").hide("slow");
  6.        $("#caja_cont_3").hide("slow");
  7.        $("#caja_cont_4").hide("slow");
  8.        $("#caja_cont_1").show("slow");
  9.     });
  10.     $("#caja_img_2").click(function(event){
  11.        $("#caja_cont_0").hide("slow");
  12.        $("#caja_cont_1").hide("slow");
  13.        $("#caja_cont_3").hide("slow");
  14.        $("#caja_cont_4").hide("slow");
  15.        $("#caja_cont_2").show("slow");
  16.     });
  17.     $("#caja_img_3").click(function(event){
  18.        $("#caja_cont_0").hide("slow");
  19.        $("#caja_cont_1").hide("slow");
  20.        $("#caja_cont_2").hide("slow");
  21.        $("#caja_cont_4").hide("slow");
  22.        $("#caja_cont_3").show("slow");
  23.     });
  24.     $("#caja_img_4").click(function(event){
  25.        $("#caja_cont_0").hide("slow");
  26.        $("#caja_cont_1").hide("slow");
  27.        $("#caja_cont_2").hide("slow");
  28.        $("#caja_cont_3").hide("slow");
  29.        $("#caja_cont_4").show("slow");
  30.     });
  31.  
  32. });


Ya busque en google pero no encontré la solución
Graciass