Ayuda con diseño ( bordes en IE )

xplorador · #1 (**permalink**) 15/07/2007, 14:05

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.

nick77 · #2 (**permalink**) 15/07/2007, 18:37

Tienes razón el IE6 le suma el valor que le das al border. Prueba quitándoselo y no uses posiciones relativas

Yaraher · #3 (**permalink**) 15/07/2007, 21:36

Puedes probar haciendo un hack para IE6, colocando algo como

* html TU_DIV {

}

y dentro de esa regla otro valor para el borde considerando la forma en que IE -erróneamente- implementa el modelo de cajas.

No es siempre lo ideal usar hacks, pero a veces son la solución a tener que replantear todo el diseño.

xplorador · #4 (**permalink**) 15/07/2007, 22:21

Estab probando con el *html y e logrado alinear los tabs pero igual sigo con el desbordamiento de 5 puntos mas en toda la altura del header....alguien me podria proporcionar alguna modificacion del code que funncione, se lo agradeceria bastante??

xplorador · #5 (**permalink**) 17/07/2007, 19:24

nadie...de verdadd ya probe cambiar varios valores en el stylo aplicando *htm div pero no lo consigo