Jump to content

Problema jquery en IE6 o 7


Recommended Posts

nuevamente recurro al foro por su ayuda.

 

bueno aca en la empresa para la que estoy haciendo la pagina trabajan con el IE6 o 7, el tema es que por un tema de protocolo o nose que wea no pueden usar otro que no sea el explorer (maldicion).

 

 

hice un menu de lo mas simple con jquery, funciona perfecto en firefox, pero al parecer y como siempre IE falla al intentar mostrarlo bien.

 

les voy a poner los codigos del html y el css y despues dos fotos, una de como se ve en firefox y la otra del IE para que se hagan una idea de como se ve mal xD.

 

<script type="text/javascript" src="css/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
   // Muestra y oculta los menús 
   $('ul li:has(ul)').hover( 
      function(e) 
      { 
         $(this).find('ul').slideDown(); 
      }, 
      function(e) 
      { 
         $(this).find('ul').slideUp(); 
      }

   ); 
}); 

 

ese esta en el head y el del css es:

 

ul li ul {
   /* Resto de estilos... */
   display: none;
}


ul, li {
    margin: 0;
    padding: 0;
    text-indent: 0;
}

/* Style */
ul {
    list-style: url(none) none;
}
ul li {
    display: inline;
    float: left;
    position: left;
    background-color: #878787;
    width: 260px;
    margin: 0;
}
ul li a {
    color: #FFFFFF;
    text-decoration: none;
    background-color: #2E2E2E;
    font-size: 1em;
    display: block;
    width: 250px;
    padding: 2px 5px;
    font-weight: bold
}
ul li a:hover, ul li a:active {
    color: #FFFFFF;
    background-color: #535C5E;
}
ul li ul {
    position: absolute;
    left:auto;
}
ul li ul li {
    display: list-item;
    float: none;
    margin: 0;
}
ul li ul li a {
    font-size: 1em;
}

 

 

y las fotos xD

 

en firefox

Imagen IPB

 

en el IE

Imagen IPB

 

 

lei que hay unos "hacks" para estas cosas y los probe pero ninguno me funciono.

 

salud

Link to comment
Share on other sites

super facil compa... el problema es que las ul de IE son padres ausentes, y no reconocen a sus hijos, por lo tanto hay que decirle donde estan poh...

 

aqui te presento mi solución: (eso si, vas a tener que especificar el ancho de la barra de navegación)

 

ul li ul {
   /* Resto de estilos... */
   display: none;
}


ul, li {
    margin: 0;
    padding: 0;
    text-indent: 0;
}

/* Style */
ul {
    list-style: url(none) none;
}
ul li {
    display: inline;
    float: left;
    /* Esto modifiqué:
    position: left; */
    position: relative;
    background-color: #878787;
    width: 260px;
    margin: 0;
}
ul li a {
    color: #FFFFFF;
    text-decoration: none;
    background-color: #2E2E2E;
    font-size: 1em;
    display: block;
    width: 250px;
    padding: 2px 5px;
    font-weight: bold
}
ul li a:hover, ul li a:active {
    color: #FFFFFF;
    background-color: #535C5E;
}
ul li ul {
    position: absolute;
    /* Esto modifiqué:
    left:auto;*/
    top: 19px; /* aqui tienes que especificar el height de la barra de navegación para que el submenu se comience a mostrar desde esa altura */
    left: 0px;
}
ul li ul li {
    display: list-item;
    float: none;
    margin: 0;
}
ul li ul li a {
    font-size: 1em;
}

 

y eso sería.

 

PD: ojalá el seremi de salud me considere y me caigan algunos morcalos... :otnot:

 

saludos

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...