Hola, buenos días...
Tengo un problema con los estilos al aplicarlos en
Firefox. Al inicio estaban trabajando bien pero no sé porque razón ya no los aplica. Al contrario en
Chrome si funcionan perfectamente.
Esta es mi hoja de estilos:
Código HTML:
@charset "utf-8";
/* CSS Document */
/* CSS Generales*/
body {
background-color: #FFF;
font-family:Arial, Helvetica, sans-serif;
}
/* CSS Header */
#menu{
position:absolute;
background-color: #FFFFFF;
width:1038px;
height:auto;
margin: 0 auto 0 auto;
top: 9%;
left: 24%;
}
.menu-logo {
float:left;
margin: 0 6px;
width: 150px;
}
.menu-carrito {
color: #FFF;
float:left;
margin: 13px 6px;
padding: 7px;
width: 200px;
/* Aplicamos bordes al Div */
border-radius:: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
/* Aplicamos los degradados */
background: -moz-linear-gradient(top, #900, #F00);
background: -webkit-linear-gradient(top, #900, #F00);
background: -o-linear-gradient(top, #900, #F00);
}
.menu-ofertas {
color: #FFF;
text-align: center;
float:left;
margin: 13px 6px;
padding: 7px;
width: 120px;
/* Aplicamos bordes al Div */
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
/* Aplicamos los degradados */
background: -moz-linear-gradient(top, #OOO, #999);
background: -webkit-linear-gradient(top, #000, #999);
background: -o-linear-gradient(top, #000, #999);
}
.menu-contacto {
color: #FFF;
text-align: center;
float:left;
margin: 13px 6px;
padding: 7px;
width: 120px;
/* Aplicamos bordes al Div */
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
/* Aplicamos los degradados */
background: -moz-linear-gradient(top, #OOO, #999);
background: -webkit-linear-gradient(top, #000, #999);
background: -o-linear-gradient(top, #000, #999);
}
.menu-facebook {
float:left;
margin: 11px 6px;
}
.menu-scroll {
float:left;
margin: 13px 6px;
}
/* CSS Cuerpo página */
#contenido {
background-color: #e6e6e6;
width:100%;
height:100%;
}
#contenido-sup {
position:absolute;
background-color: #e6e6e6;
width:1038px;
height:auto;
border:1px solid #e6e6e6;
margin: 0 auto 0 auto;
left:24%;
top:20%;
}
.sup-izq {
float: left;
width:auto;
margin: 12px 1px 1px 45px;
}
.sup-cent {
float: left;
width:auto;
margin: 12px 1px 1px 1px;
}
.sup-der {
float: left;
width:auto;
margin: 12px 45px 1px 1px;
}
.inf-izq {
clear:both;
width:auto;
margin: 10px 1px 12px 45px;
}
.inf-cent {
float:left;
width:auto;
margin: 1px 1px 12px 45px;
}
.inf-der {
float:right;
width:auto;
margin: 1px 45px 12px 1px;
}
/* CSS Footer*/
#footer {
clear:both;
padding-top: 5px;
background-color:#FFFFFF;
margin-bottom:-12px;
margin-left: -5px;
margin-right: -5px;
}
.footer-dir {
padding-top: 5px;
font-size: 10px;
text-align:center
}
.footer-data {
font-size:10px;
text-align:center
}
el problema radica más que nada en dos puntos. No aplica el borde redondeado al menu y en ocasiones no aplica el ancho de los divs.
main.php
Código HTML:
<?php include("templates/header.php"); ?>
<body>
<div id="contenido">
<div id="menu">
<?php include("templates/menu.php"); ?>
</div>
<!--Comienza area superior-->
<div id="contenido-sup">
<div class="sup-izq">
<img src="imagenes/cont_index_r1_c1.jpg" alt="" />
</div>
<div class="sup-cent"> <!--Esta es imagen dinamica-->
<img src="imagenes/catalogos/cont_index_r1_c2.jpg" alt="" />
</div>
<div class="sup-der">
<img src="imagenes/cont_index_r1_c3.jpg" alt="" />
</div>
<div class="inf-izq"> <!--Esta es imagen dinamica-->
</div>
<div class="inf-cent"> <!--Esta es imagen dinamica-->
<img src="imagenes/catalogos/cont_index_r2_c1.jpg" alt="" />
</div>
<div class="inf-der">
<img src="imagenes/cont_index_r2_c2.jpg" alt="" />
<img src="imagenes/cont_index_r2_c3.jpg" alt="" />
</div>
<div id="footer">
<?php include("templates/footer.php"); ?>
</div>
</div>
<!--Finaliza area superior-->
</div>
</body>
</html> menu.php
Código HTML:
<div id="menu-superior">
<div class="menu-logo"><img src="imagenes/logo.png" alt="" /></div>
<a href="#"><div class="menu-carrito"><strong>Carrito de compras</strong></div></a>
<a href="#"><div class="menu-ofertas"><strong>Ofertas</strong></div></a>
<a href="#"><div class="menu-contacto"><strong>Contacto</strong></div></a>
<a href="#"><div class="menu-facebook"><img src="imagenes/logo-facebook.png" alt="" /></div></a>
<div class="menu-scroll">
<select title="Búsqueda por Categoría">
<option>Categoría</option>
</select>
</div>
</div>
<div id="menu-jquery">
</div> Estoy usando la versión 13.0 de Firefox. ¿Alguna idea?
De antemano agradezco sus comentarios. Saludos!!