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 <li><a href="#" class="active">Noticias
</a></li> <li><a href="#">Roster
</a> <li><a href="#">Battlefield 3
</a></li> <li><a href="#">Battlefield 4
</a></li> <li><a href="#">Counter Strike 1.6
</a></li> <li><a href="#">Counter Strike GO
</a></li> <li><a href="#">Counter Strike Source
</a></li> <li><a href="#">Dota 2
</a></li> <li><a href="#">Leage of Legends
</a></li> <li><a href="#">War Thunder
</a></li> <li><a href="#">Cerrados
</a> <li><a href="#">Jugados
</a></li> <li><a href="#">Proximos
</a></li> <li><a href="#">Torneos
</a></li> <li><a href="#">Servidores
</a> <li><a href="#">Battlefield 3
</a></li> <li><a href="#">Battlefield 4
</a></li> <li><a href="#">Counter Strike 1.6
</a></li> <li><a href="#">Counter Strike GO
</a></li> <li><a href="#">Counter Strike Source
</a></li> <li><a href="#">Multimedia
</a> <li><a href="#">Fotos
</a></li> <li><a href="#">Videos
</a></li> <li><a href="#">Screenshots
</a></li> <li><a href="#">Contacto
</a></li>
Y lo importante, el css
Código CSS:
Ver original/* NAVEGACION */
#top-nav {
height: 81px;
width: 100%;
background: url('../img/nav-bg.png') repeat-x;
}
#top-nav ul li {
float: left;
position: relative;
margin: 15px 0 0 20px;
text-transform: uppercase;
font-weight: bold;
}
#top-nav ul li a {
color: #fff;
}
#top-nav ul li a:hover {
color: #2da7e4;
text-decoration: none;
}
#top-nav li ul {
width: 1019px;
z-index: 999;
float: left;
left: -9999px;
position: absolute;
}
#roster-nav, #cerrados-nav, #servidores-nav, #multimedia-nav,
#roster-nav a, #cerrados-nav a, #servidores-nav a, #multimedia-nav a{
font-size: 10pt;
font-weight: inherit;
padding: 12px 0 12px 0;
font-weight: 100;
color: #666666 !important;
font-size: 8pt;
}
#roster-nav a:hover, #cerrados-nav a:hover, #servidores-nav a:hover, #multimedia-nav a:hover {
color: #fff !important;
}
nav li:hover ul#roster-nav, nav li:hover ul#cerrados-nav,
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#roster-nav { margin-left: -9.50em;}
#cerrados-nav { margin-left: -16.50em; }
#servidores-nav { margin-left: -32.90em; }
#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