Hola a todxs,
Mi problema básicamente es con la visualización de un sitio en firefox. La dirección de la web es: http://sasaingalemana.com, y me basé en la plantilla [URL="http://www.html5xcss3.com/2012/03/html5-template-genesis-business.html"]Genesis [/URL]de TemplateMonster ; el cambio fundamental, y que fue el que me generó problemas, fue cambiar el menú horizontal sencillo a un menú horizontal desplegable.
Al subirlo y testear el sitio en Chrome y en IE no hubo problema, pero en Firefox el Slide y los banners aparecen a la mitad del sitio. Pasé el sitio por [URL="http://browsershots.org/http://sasaingalemana.com/"]http://browsershots.org/[/URL], y me mostró que en efecto el problema es con Firefox en cualquier versión y SO. Ahora, supongo que esto se debe al cambio que hice en el header del sitio para que pudiese verse el menú deplegable.
El HTML del menú es:
Código:
<header>
<div class="mainheader" style="position:relative; z-index:9999;">
<h1><a href="index.html"><img src="images/logo.png" alt=""></a></h1>
<nav>
<ul class="menu">
<li><a href="index.html">Inicio</a></li>
<li><a href="sasa.html">SASA</a></li>
<li><a href="procesos.html">Procesos</a></li>
<li><a href="#">Productos</a>
<ul>
<li style="z-index:101;"><a href="anticaidas.html">Anticaídas</a></li>
<li><a href="ergo.html">Ergo</a></li>
</ul>
</li>
<li><a href="clientes.html">Clientes</a></li>
<li class="current"><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
</div>
</header>
y el del Slide y banner es:
Código:
<section id="header-content">
<div class="main">
<div class="sub-page-banner page2-banner">
<p><strong class="font-1">Contáctenos</strong><strong class="font-2">desde cualquier</strong><strong class="font-1">lugar de</strong><strong class="font-2">Colombia</strong></p>
</div>
</div>
</section>
El CSS para esta sección es:
Código:
/***********************************************************************/
.mainheader {
width:940px;
margin:0 auto;
overflow:visible;
position:relative;
visibility: visible;
}
.main {
width:940px;
margin:0 auto;
overflow:hidden;
position:relative;
visibility: visible;
}
/*********************************header*************************************/
header {
width:100%;
background:url(../images/header-bg.gif) 0 0 repeat;
margin:0 auto;
z-index:101;
position:relative;
z-index:100;
}
h1 {float:left; margin:16px 0 16px 0px;}
.menu,
.menu ul,
.menu li,
.menu a {margin: 0;
padding: 0;
border: none;
outline: none;
}
.menu {
margin: 15px 0 0 0;
float:right;
background:url(../images/header-bg.gif) 0 0 repeat;
border-radius: 5px;
}
.menu li {
position: relative;
list-style: none;
float: left;
line-height: 20px;
margin: 10px 0px 0 2px;
display: block;
height: 42px;
}
.menu li a {
display: block;
padding: 0 16px;
margin: 6px 0;
line-height: 20px;
text-decoration: none;
font-size: 16px;
color: #f3f3f3;
display:inline-block;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
transition: color .2s ease-in-out;
}
.menu li:first-child a { border-left: none;}
.menu li:last-child a{ border-right: none;}
.menu li:hover > a { color: #E93E4A; }
.menu li.current a { color: #E93E4A; }
.menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background:url(../images/header-bg.gif) 0 0 repeat;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul { opacity: 1;}
.menu ul li {
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 90px;
padding: 4px 0 4px 18px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a { border: none; }
#header-content {width:100%; background:url(../images/header-content-bg.gif) 0 0 repeat; margin:0 auto; position:relative; z-index: 99;}
.sub-page-banner {width:940px; height:369px; margin:30px 0 30px 0;}
.page2-banner {background:url(../images/page2-banner.jpg) 0 0px no-repeat;}
.page3-banner {background:url(../images/page3-banner.jpg) 0 0px no-repeat;}
.page4-banner {background:url(../images/page4-banner.jpg) 0 0px no-repeat;}
.page5-banner {background:url(../images/page5-banner.jpg) 0 0px no-repeat;}
.page6-banner {background:url(../images/page6-banner.jpg) 0 0px no-repeat;}
.sub-page-banner p {padding:47px 0 0 80px;}
.sub-page-banner strong { display:block; color:#fff; margin-top:-34px; }
.sub-page-banner strong:first-child {margin-top:0 !important;}
.sub-page-banner strong+strong+strong {margin-top:-23px !important;}
.sub-page-banner strong+strong+strong+strong {margin-top:-34px !important;}
.font-1 { font-size:50px; line-height:60px; letter-spacing:-3px;}
.font-2 {font-size:100px; line-height:120px; letter-spacing:-4px;}
Mis estimados amigos, estoy enredadísimo con esto... ¿alguien me puede ayudar?
Un saludo