Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/12/2010, 23:46
bcjmpr
 
Fecha de Ingreso: noviembre-2010
Mensajes: 27
Antigüedad: 13 años, 5 meses
Puntos: 0
hover / active con imágenes en IE 6

Bueno, no sé con seguridad si mi problema es CSS, agradeceré muevan el post al foro correcto si no es así.

Tengo un menú con imágenes, una para "nosotros", "productos" y al final "contacto". El caso es que, dependiendo de qué sección visite el usuario, la imagen del link activo cambia por una imagen igual pero subrayada. He probado la página en FF, Opera y Chrome y sale perfectamente. Pero en IE 6, sorpresa, sólo funciona el primer link, "nosotros", es decir, es el único que se subraya al visitar esa sección. No entiendo porqué el mismo código me funciona de maravilla en otros navegadores y, más raro, que en IE si funciona para el primer link y para el resto ya no.

El archivo menu.php (que jalo con un include) tiene lo siguiente:

Código PHP:
Ver original
  1. <div id="menu">
  2.         <div class="nosotros"
  3. <?php
  4.     if($page == 'nosotros.php')
  5.     {
  6.     echo "id='activo'";
  7.     }
  8. ?>
  9.         ><a href="nosotros.php" alt="nosotros" title="nosotros"></a></div>
  10.        
  11.         <div class="productos"
  12. <?php
  13.     if($page == 'productos.php')
  14.     {
  15.     echo "id='activo'";
  16.     }
  17. ?>
  18.         ><a href="productos.php" alt="productos" title="productos"></a></div>
  19.        
  20.         <div class="contacto"
  21. <?php
  22.     if($page == 'contacto.php')
  23.     {
  24.     echo "id='activo'";
  25.     }
  26. ?>     
  27.         ><a href="contacto.php" alt="contacto" title="contacto"></a></div>
  28.     </div>

y mi css es así:

Código CSS:
Ver original
  1. div.nosotros
  2. {
  3. margin-bottom: 0.9em;
  4. margin-left: 2.7em;
  5. width: 92px;
  6. height: 26px;
  7. background-image: url("images/jpg/nosotros.jpg");
  8. }
  9.  
  10. div.nosotros:hover, div.nosotros#activo
  11. {
  12. background-image: url("images/jpg/nosotros_over.jpg");
  13. }
  14.  
  15. div.productos
  16. {
  17. margin-bottom: 0.9em;
  18. margin-left: 2.7em;
  19. width: 92px;
  20. height: 25px;
  21. background-image: url("images/jpg/productos.jpg");
  22. }
  23.  
  24. div.portafolio:hover, div.portafolio#activo
  25. {
  26. background-image: url("images/jpg/productos_over.jpg");
  27. }
  28.  
  29. div.contacto
  30. {
  31. margin-bottom: 0.9em;
  32. margin-left: 2.7em;
  33. width: 92px;
  34. height: 26px;
  35. background-image: url("images/jpg/contacto.jpg");
  36. }
  37.  
  38. div.contacto:hover, div.contacto#activo
  39. {
  40. background-image: url("images/jpg/contacto_over.jpg");
  41. }

Y al inicio de cada página tengo el siguiente código para detectar en qué página se encuentra el usuario:

Código PHP:
Ver original
  1. <?php
  2.     $page = basename($_SERVER['SCRIPT_NAME']);
  3. ?>

Ojalá alguien me ayude a ver la luz, me resisto a creer que IE es tan malo que incluso reacciona diferente ante el mismo código (bueno, sé que al final será algún descuido mío, jeje).