Foros del Web » Creando para Internet » CSS »

Ayuda con diseño ( bordes en IE )

Estas en el tema de Ayuda con diseño ( bordes en IE ) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/07/2007, 15:05
Avatar de xplorador  
Fecha de Ingreso: enero-2002
Ubicación: Peru
Mensajes: 105
Antigüedad: 15 años, 11 meses
Puntos: 0
Ayuda con diseño ( bordes en IE )

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.
__________________
Adictoshp.org

Última edición por xplorador; 15/07/2007 a las 15:14
  #2 (permalink)  
Antiguo 15/07/2007, 19:37
 
Fecha de Ingreso: noviembre-2004
Mensajes: 80
Antigüedad: 13 años, 1 mes
Puntos: 0
Re: Ayuda con diseño ( bordes en IE )

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

Última edición por nick77; 15/07/2007 a las 19:47
  #3 (permalink)  
Antiguo 15/07/2007, 22:36
Avatar de Yaraher  
Fecha de Ingreso: abril-2007
Ubicación: Lima, Perú
Mensajes: 262
Antigüedad: 10 años, 8 meses
Puntos: 9
Re: Ayuda con diseño ( bordes en IE )

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.
  #4 (permalink)  
Antiguo 15/07/2007, 23:21
Avatar de xplorador  
Fecha de Ingreso: enero-2002
Ubicación: Peru
Mensajes: 105
Antigüedad: 15 años, 11 meses
Puntos: 0
Re: Ayuda con diseño ( bordes en IE )

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??
__________________
Adictoshp.org
  #5 (permalink)  
Antiguo 17/07/2007, 20:24
Avatar de xplorador  
Fecha de Ingreso: enero-2002
Ubicación: Peru
Mensajes: 105
Antigüedad: 15 años, 11 meses
Puntos: 0
Re: Ayuda con diseño ( bordes en IE )

nadie...de verdadd ya probe cambiar varios valores en el stylo aplicando *htm div pero no lo consigo
__________________
Adictoshp.org
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:02.