Hola, mi nomre es Omar Gonzáles. Les escribo porque tengo un problema con el header en IE8, y quisiera que me ayuden si fuesen tan amables.
Este es mi código HTML, le puse un código para que sólo lo lea IE6 (supongo que tmb sirve para IE8, o no?). Eso fue lo que encontré googleando... soy nuevo en esto, por favor cualquier ayuda se agradece.
Código:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<!--[if lte IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<div class="HorizLinks">
<ul>
<li><a href="somos.html">¿Quiénes somos?</a></li>
<li><a href="productos.html">Productos</a></li>
<li><a href="foros.html">Foros</a></li>
</ul>
</div>
</div>
<div id="horizontalnav">
<div class="navlinks">
<ul>
<li><a href="somos.html">¿Quiénes somos?</a></li>
<li><a href="productos.html">Productos</a></li>
<li><a href="foros.html">Foros</a></li>
</ul>
</div>
</div>
<div id="leftnav">
<div class="VertiLinks">
<ul>
<li><a href="somos.html">Quiénes Somos</a></li>
<li><a href="productos.html">Productos</a></li>
<li><a href="foros.html">Foros</a></li>
</ul>
</div>
</div>
<div id="body"> This is the body </div>
<div id="footer"> This is the footer </div>
</div>
</body>
</html>
Este es mi código CSS (del archivo ie6.css, tengo otro que se llama style.css, me recomendaron crear dos para evitar deformaciones entre navegadores. El código es el mismo tanto en style.css como en ie6.css, no sé que debo cambiar para que se vea bien la css que sólo leerá IE gracias a la llamada que puse en mi html):
Código:
#container {
width: 100%;
}
#body {
font: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background: #ffffff;
padding: 20px;
}
#header {
width: 100%;
height: 30%;
background-image: url(images/banner.jpg);
position: relative;
border-bottom: 20px solid #000000;
}
#header a {
color: ffffff;
text-decoration: none;
font-weight: bold;
font-family: verdana, helvetica, sans serif;
font-size: 16px;
}
#header a:visited {
color: 40c0ff;
text-decoration: underline;
font-weight: bold;
}
.HorizLinks {
position: absolute; top: 160px; left: 260px;
}
.HorizLinks ul {
margin: 0px;
}
.HorizLinks li {
margin: 0px 15px 0px 0px;
list-style-type: none;
display: inline;
}
#horizontalnav {
width: 100%;
height: 40px;
position: relative;
background-color: #F2D6AF;
border-bottom: 2px solid #000000;
}
.navlinks {
position: absolute; top: 4px; left; 240px;
}
.navlinks ul {
margin: auto;
}
.navlinks li {
margin: 0px 18px 0px 0px;
list-style-type: none;
display: inline;
}
.navlinks li a {
color: #000000;
padding: 5px 12px 7px;
text-decoration: none;
font-size: 16px;
font-family: arial;
}
.navlinks li a:hover {
color: #ffffff;
background-image: url(images/leftbotones.jpg);
text-decoration: underline;
}
#leftnav {
float: left;
width: 24%;
height: 96%;
background-color: c0c0c0;
position: relative;
border-right: 1px dashed #694717;
}
#leftnav a {
color: #ffffff;
font-family: arial;
text-decoration: none;
font-size: 16px;
}
.VertiLinks {
position:absolute; top: 20px;
}
.VertiLinks ul {
margin: 0px;
}
.VertiLinks li {
margin: 55px 0px 0px 0px;
list-style-type: none;
}
.VertiLinks a {
padding: 20px 50px 20px 20px;
}
.VertiLinks li a:hover {
color: #ffffff;
background-image: url(images/black.jpg);
text-decoration: underline;
}
#rightnav {
float: right;
width: 140px;
height: 400px;
background-color: c0c0c0;
border-right: 1px dashed #694717;
}
#footer {
clear: both;
background-color: #D1C0A7;
}