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
}
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>
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>
De antemano agradezco sus comentarios. Saludos!!
existe alguna instrucción mejorada, pero por el momento solo te puedo decir que regreses a la 12 en donde funcionara sin problemas, en cuanto tenga algo espero hacertelo saber.
