Hola a Todos: estoy maquetando un sitio web en html y css. He seguido los pasos y compruebo que Internet Explorer me muestra los links del menú del footer, pero en cambio Mozilla no. Tengo entendido que IE es jodido en mostrar lo que un diseñador quiere, pero no sabía que mozilla le pasara lo mismo.
Les dejo el html y el css:
html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ozzio</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script> document.createElement("header");
document.createElement("nav");
document.createElement("sidebar");
document.createElement("footer");</script>
</head>
<body>
<div id="wrap">
<header>
<div id="buscador">
</div>
:
</header>
<nav>
<ul>
<li><a href="#">Productos</a></li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Preguntas Frecuentes</a></li>
<li><a href="#">Ofertas</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<div id="content">
<div id="main">
</div>
<div id="sidebar">
</div>
<div id="flotante">
</div>
</div>
<footer>
<ul>
<li><a href="#">Productos</a></li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Preguntas Frecuentes</a></li>
<li><a href="#">Ofertas</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacto</a></li>
</ul>
<br>
<!--aca va el otro loguito chiquito fondo blanco-->
<div id="copy">Copyright © 2011 Desarrollado por <a href="#" target="_blank">Canvas Estudio</a></div>
<div id="canvas"></div>
</footer>
</div>
</body>
</html>
CSS
@media screen {
}
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fielset, blockquote {
margin: 0;
padding: 0;
border: 0;
}
wrap {
width: 95%;
margin: 0 auto;
background: #000;
}
@font-face{ font-family: 'arial narrow'; src: url('../fonts/arialn-webfont.eot') format ('eot'), url ('../fonts/arialn-webfont.svg') format ('svg'), url ('../fonts/arialn-webfont.ttf') format ('ttf'), url ('../fonts/arialn-webfont.woff') format ('woff');
}
@font-face{font-family: 'arial narrow bold'; src: url('../fonts/arialnb-webfont.eot') format ('eot'), url ('../fonts/arialnb-webfont.svg') format ('svg'), url ('../fonts/arialnb-webfont.ttf') format ('ttf'), url ('../fonts/arialnb-webfont.woff') format ('woff');
}
@font-face{font-family: 'bookman old style'; src: url('../fonts/bookos-webfont.eot') forma ('eot'), url ('../fonts/bookos-webfont.svg') format ('svg'), url ('../fonts/bookos-webfont.ttf') format ('ttf'), url ('../fonts/bookos-webfont.woff') format ('woff');
}
#buscador {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
line-height: normal;
font-weight: bold;
color: #FFF;
background-color: #000;
padding: 10px;
clear: right;
float: right;
height: auto;
width: auto;
margin: 5px;
border: 1px solid #CCC;
}
header {
background-color: #FFF;
display: block;
padding: 5px;
height: 100px;
width: 100%;
border: 1px solid #000;
}
nav {
background: #d9cba0;
width: 100%;
padding: 15px;
font-family: "bookman old style";
font-size: 14pt;
color: #000;
text-align: center;
clear: both;
float: left;
height: 18pt;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
list-style-type: none;
border: 1px solid #000;
margin: 0 auto;
}
nav ul {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
display: block;
border-left: 1px solid #fff;
}
nav ul li {
border-right: 1px solid #fff;
float: left;
margin-left: 2%;
padding-right: 2%;
}
nav ul li a, a:visited {
color: #000;
padding-top: 5 px;
padding-bottom: 5 px;
padding-right: 10 px;
padding-left: 10 px;
display: block;
text-decoration: none;
}
nav ul li a:hover {
background-color: #e7dbb0;
font-color: #605e71;
text-decoration:underline;
}
nav ul li a:active {
text-color: #fff;
text-decoration: none;
}
#content {
width: 100%;
}
#main {
float: right;
width: 70%;
padding-bottom: 10px;
padding-left: 2%;
padding-right: 2%;
padding-top: 2%;
}
#main p {
font-family:Verdana, Geneva, sans-serif;
font-size: 12 pt;
font-color: #000;
text-indent: 5px;
text-align:justify;
text-decoration: none;
max-width: 60%;
}
#main p a {
text-decoration: none;
font-color: #09F;
}
#main p a:hover {
text-decoration: underline;
}
#main p a:visited {
font-color: #60C
}
#main hi {
font-family: "arial narrow bold";
font-size: 18pt;
font-color: #3a2f07;
text-align: left;
}
#main h2 {
font-family: "arial narrow bold";
font-size: 16pt;
font-color: #3a2f07;
text-align: left;
}
#main h3 {
font-family: "arial narrow bold";
font-size: 14pt;
font-color: #3a2f07;
text-align: left;
}
img {
padding: 5px;
background-color:#CC9;
margin: 10px;
float:left;
size: 100%;
}
img a {
background-color: #CC9;
border: 2px #999;
}
img a:hover {
border: 2px #FFF;
}
#sidebar {
float: left;
width: 12%;
padding-bottom: 10px;
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
background-color: #d9cba0;
font-family: "arial narrow";
font-size: 14pt;
text-align: left;
font-color: #7c7357 ;
}
#sidebar h1 {
font-family: "arial narrow bold";
font-color: #7c7357;
font-size: 18pt;
text-shadow:#FFF;
}
#sidebar a {
font-color: #7c7357;
text-decoration: none;
}
#sidebar a:hover {
font-color: #FFF;
text-decoration: underline;
text-shadow:#000;
}
#sidebar p {
font-size: 12px;
text-color: #000;
font-style:normal;
text-align: justify;
text-indent: 3px;
}
footer {
font-family: "bookman old style";
font-size: 12pt;
color: #fff;
background-color: #000;
letter-spacing: normal;
text-align: justify;
vertical-align: middle;
word-spacing: normal;
margin: auto;
padding: 10px;
clear: both;
float: left;
height: auto;
width: 100%;
border: medium double #FFF;
display: block;
}
footer ul {
clear: both;
float: left;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
footer ul li {
float: left;
}
footer ul li a {
padding: 10px;
display: block;
text-decoration: none;
color: #fff;
}
footer ul li a:hover {
text-decoration:underline;
text-shadow:#ccc;
}