Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/11/2013, 10:00
Avatar de Faks
Faks
 
Fecha de Ingreso: junio-2012
Mensajes: 26
Antigüedad: 11 años, 10 meses
Puntos: 1
Problema para ubicar navegación postion:absolute

Hola,
Estoy armando una pagina web, pero me surgieron dos problemas. El primero, y mas importante es que tengo una navegación "hija", que me esta dando problemas para ubicarla. En Chrome se ve perfecto, en IE aceptable pero en Firefox me rompe el corazon (?)

En cuestión, la pagina web y su navegación es la esta: cahos.webcreatio.com.ar

El html de la nav es:

Código HTML:
Ver original
  1. <nav id="top-nav">
  2.                 <ul>
  3.                     <li><a href="#" class="active">Noticias</a></li>
  4.                     <li><a href="#">Roster</a>
  5.                         <ul id="roster-nav">
  6.                             <li><a href="#">Battlefield 3</a></li>
  7.                             <li><a href="#">Battlefield 4</a></li>
  8.                             <li><a href="#">Counter Strike 1.6</a></li>
  9.                             <li><a href="#">Counter Strike GO</a></li>
  10.                             <li><a href="#">Counter Strike Source</a></li>
  11.                             <li><a href="#">Dota 2</a></li>
  12.                             <li><a href="#">Leage of Legends</a></li>
  13.                             <li><a href="#">War Thunder</a></li>
  14.                         </ul>
  15.                     </li>
  16.                     <li><a href="#">Cerrados</a>
  17.                         <ul id="cerrados-nav">
  18.                             <li><a href="#">Jugados</a></li>
  19.                             <li><a href="#">Proximos</a></li>
  20.                         </ul>
  21.                     </li>
  22.                     <li><a href="#">Torneos</a></li>
  23.                     <li><a href="#">Servidores</a>
  24.                         <ul id="servidores-nav">
  25.                             <li><a href="#">Battlefield 3</a></li>
  26.                             <li><a href="#">Battlefield 4</a></li>
  27.                             <li><a href="#">Counter Strike 1.6</a></li>
  28.                             <li><a href="#">Counter Strike GO</a></li>
  29.                             <li><a href="#">Counter Strike Source</a></li>
  30.                         </ul>
  31.                     </li>
  32.                     <li><a href="#">Multimedia</a>
  33.                         <ul id="multimedia-nav">
  34.                             <li><a href="#">Fotos</a></li>
  35.                             <li><a href="#">Videos</a></li>
  36.                             <li><a href="#">Screenshots</a></li>
  37.                         </ul>
  38.                     </li>
  39.                     <li><a href="#">Foro</a></li>
  40.                     <li><a href="#">Contacto</a></li>
  41.                 </ul>
  42.             </nav><!-- fin nav -->

Y lo importante, el css

Código CSS:
Ver original
  1. /* NAVEGACION */
  2.  
  3. #top-nav {
  4.     height: 81px;
  5.     width: 100%;
  6.     background: url('../img/nav-bg.png') repeat-x;
  7. }
  8.  
  9. #top-nav ul li {
  10.     float: left;
  11.     position: relative;
  12.     margin: 15px 0 0 20px;
  13.     text-transform: uppercase;
  14.     font-weight: bold;
  15. }
  16.  
  17. #top-nav ul li a {
  18.     color: #fff;
  19. }
  20.  
  21. #top-nav ul li a:hover {
  22.     color: #2da7e4;
  23.     text-decoration: none;
  24. }
  25.  
  26. #top-nav li ul {
  27.     width: 1019px;
  28.     z-index: 999;
  29.     float: left;
  30.     left: -9999px;
  31.     position: absolute;
  32. }
  33.  
  34. #roster-nav, #cerrados-nav, #servidores-nav, #multimedia-nav,
  35. #roster-nav a, #cerrados-nav a, #servidores-nav a, #multimedia-nav a{
  36.     font-size: 10pt;
  37.     font-weight: inherit;
  38.     padding: 12px 0 12px 0;
  39.     font-weight: 100;
  40.     color: #666666 !important;
  41.     font-size: 8pt;
  42. }
  43.  
  44. #roster-nav a:hover, #cerrados-nav a:hover, #servidores-nav a:hover, #multimedia-nav a:hover {
  45.     color: #fff !important;
  46. }
  47.  
  48. nav li:hover ul#roster-nav, nav li:hover ul#cerrados-nav,
  49. nav li:hover ul#servidores-nav, nav li:hover ul#multimedia-nav { left: 0; }

Y actualmente lo intente mover a la izquierda para que quede a la altura de la principal con (también probé directamente con ponerle la propiedad "left")

Código CSS:
Ver original
  1. #roster-nav { margin-left: -9.50em;}
  2. #cerrados-nav { margin-left: -16.50em; }
  3. #servidores-nav { margin-left: -32.90em; }
  4. #multimedia-nav {margin-left: -43em; }

En fin, si pudiera hacer que en todos los navegadores se viese como en chrome, seria todo un logro para mi.

Gracias!!

pd: Otra cosa que eh notado es que Firefox me imprime la tipografía considerablemente mas grande :S

Última edición por Faks; 06/11/2013 a las 10:29 Razón: correccion de enlace