HOla tengo el siguiente codigo para el encabezado de mi blog funciona perfecto e Firefox e IE7 pero en IE6 tengo un problema que el header sobrepasa en la medida dada creo que es por que el IE5 cuenta tambien el alto del border estado tratando de cambiar valores una y otra vez pero sigo con el problema en IE6 por favor alguien que le de una mirada y decirme como solucionaria esto...
graciass.
Aqui dejo el code:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body {
margin:0 auto;
padding: 0px;
}
/*-- (Cabecera) --*/
#header {
background: #0C72A2 url(http://usuarios.lycos.es/cyberespia/blog/head_bg.gif) repeat-x;
height: 110px;
border-top: 5px solid #222D2D;
position: relative;
color: #D16683;
}
#barra {
width:760px;
margin: 0px auto;
height: 110px;
background: #ff00ff;
padding:0px;
}
#headerimg {
position: relative;
height: 110px;
width: 350px;
float: left;
background: #006f9e;
}
#navi {
height: 110px;
width:410px;
text-align: center;
line-height: normal;
float: left;
background: #216498;
}
/*-- (Menú) --*/
#nav {
list-style: none;
margin: 0 3px;
padding: 80px 0 0 0; /* margin top de los tabs */
float: right;
}
#nav li {
float: left;
height: 30px;
background: url(http://usuarios.lycos.es/cyberespia/blog/navtabr.png) top right no-repeat;
margin: 0 3px;
white-space: nowrap;
}
#nav .page_item a{
color: #FFFFFF;
display: block;
background: url(http://usuarios.lycos.es/cyberespia/blog/navtabl.png) top left no-repeat;
text-decoration: none;
padding: 0px 10px 0px 10px;
font: bold 12px Arial, Helvetica, sans-serif;
line-height: 30px;
}
#nav li:hover {
background-position: 100% -36px;
}
#nav .page_item a:hover {
background-position: 0px -36px;
border: none;
}
#nav li.current_page_item {
color: #198CBB;
text-decoration: none;
background: url(http://usuarios.lycos.es/cyberespia/blog/navtabactiver.png) top right no-repeat;
border-bottom: 1px solid #E3F7FF;
}
#nav .current_page_item a, #nav .current_page_item a:visited{
color: #198CBB;
text-decoration: none;
background: url(http://usuarios.lycos.es/cyberespia/blog/navtabactivel.png) top left no-repeat;
}
</style>
</HEAD>
<BODY>
<!-- (Cabecera) -->
<div id='header'>
<div id='barra'>
<div id='headerimg'>
<img height='110' src='http://usuarios.lycos.es/cyberhi5/blog/head_cyber.jpg'/>
</div>
<div id='navi'>
<ul id='nav'>
<li class='page_item'><a href='#'>Inicio</a></li>
<li class='page_item'><a href='#'>Blog</a></li>
<li class='page_item'><a href='#'>Fotos</a></li>
<li class='page_item'><a href='#'>Contacto</a></li>
</ul>
</div>
</div> <!--/ barra -->
</div>
</BODY>
</HTML>
PD: soy nuevo en esto de CSS.