Problema con bordes en cabecera 3 columnas

vega22 · #1 (**permalink**) 10/01/2008, 08:42

Estoy tratando de montar una cabecera así a la manera que veis abajo. Es decir, es tipo tabla, una div envolvente y tres div "celdas". El problema es que Firefox la lee ya perfecto, pero IE se hace un pollo con los bordes de la "celda" central y me separa los bordes izquierdo y derecho de ella de los de sus "celdas" contiguas. ¿Como hago para que queden tambien en IE todo bien pegadito?

Gracias por adelantado...

Código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
<!--
#div_cab {
	margin: 0px;
	padding: 0px;
	border: 2px solid #009900;
	height: 81px;
}

#div_cab_iz {
	float: left;
	width: 25%;
	background-image: url(../fondo1.jpg);
	background-repeat:  repeat-y;
	background-position: right;
	text-align: center;
	border: 1px solid #003300;
	height: 79px;
	margin: 0px;
	padding: 0px;
}
#div_cab_dr {
	float: right;
	width: 25%;
	background-image: url(../fondo2.jpg);
	background-repeat:  repeat-y;
	background-position: left;
	text-align: center;
	border: 1px solid #003300;
	height: 79px;
	margin: 0px;
	padding: 0px;
}
#div_cab_cent {
	width: auto;
	height: 79px;
	margin: 0px auto;
	padding: 0px;
	text-align: center;
	border: 1px solid #003300;
}
-->
</style>
</head>

<body>
<div id=div_cab>
  <div id="div_cab_iz"><img src="../logo.gif" width="168" height="79" /></div>
  <div id="div_cab_dr">derecha</div>
  <div id="div_cab_cent">central</div>
</div>

</body>
</html>

safranero · #2 (**permalink**) 10/01/2008, 08:43

Intenta poner al principio del css * { margin:0; padding: 0 } Lo que hace es quitar margenes a todos los elementos de la página.

hades87 · #3 (**permalink**) 10/01/2008, 08:49

yo no veo cual es el problema, no te salen las 3 celdas juntas?

vega22 · #4 (**permalink**) 10/01/2008, 10:56

No sale, safranero....Hades87, te explico el problema mas detalladamente: en principio las celdas deben ocupar 25% las laterales y 50% la central. Al darle bordes, las celdas laterales pasan a tener 25%+borde. Entonces si la dejo en 50% la central, se desdibuja todo el diseño en IE porque ésta no cabe entre las otras dos. Tengo que ponerlo en auto. Todo bien, pero en auto, no se expande hasta rellenar todo el hueco. Se queda a unos 3 pixeles separado por cada lado...

vega22 · #5 (**permalink**) 10/01/2008, 11:28

Lo solucioné con un workaround: he metido una div contenedera más. Ahora juego con ella, sus bordes y los de las divs exteriores para dibujar todos los bordes interiores que necesito, y la div celda central que es la que no encaja bien es invisible. Eah...

hades87 · #6 (**permalink**) 10/01/2008, 14:04

mmm entiendo, también podrias hacer 2 celdas con float left y right y meterles tamaño 25% y la del centro ya saldría automáticamente no?

vega22 · #7 (**permalink**) 10/01/2008, 14:28

Bueno, de ahí partimos, Hades, de tener dos celdas flotantes como ves en el codigo, y una en medio que debería encajar líquida y perfecta para todos los navegadores y no lo hace. Los últimos valores que le he dado a la central son 25% de margen a los lados y width=auto, que es lo que mejor va. Ya he solucionado con eso y el truco que puse arriba el tema de los bordes. Pero esa div central debería llevar también un fondo...con lo cual estamos en lo mismo, que se ve exactamente ajustado en FF y en IE se me separa de las flotantes laterales unos pixeles. Ya no tengo más recursos, así que estoy viendo de cambiar el diseño original (se trata de una web hecha en tablas que tengo que pasar a divs) por culpa de estas cosas.

hades87 · #8 (**permalink**) 10/01/2008, 15:44

entiendo, pues yo ya no se que mas hacer, pq parece que ya has intentado todo no?:\

vega22 · #9 (**permalink**) 10/01/2008, 17:11

Pues sí, ya hice de todo y puedo garantizar que no hay modo de que salga como tiene que salir. He jugado con overflows incluso. Nada. Los navegadores entienden de modo distinto la propiedad "auto" y en un caso así no puede variar ni un píxel, ni "auto" arriba ni "auto" abajo.
Aún me debato entre cambiar el diseño por mi cuenta o meter una sencilla, rápida y eficaz tablita de sólo tres celditas, formateada con tres mínimos apuntes de css y listo. La verdad, vaya tela, vaya tela, cómo se nos ha complicado la vida...

vega22 · #10 (**permalink**) 12/01/2008, 05:37

Esto...he encontrado una manera de lograrlo a base de anidar más divs dentro de los 4 principales, para así jugar con los fondos. Puedo dar así un fondo general que me tapa todos los huecos en todos los navegadores y luego sobreponer el resto de fondos que necesito se vayan viendo en cada div-celda, haciendo algunos malabarismos de photoshop.
Pero me surge otra duda. Es bastante más código que usar una tablita de tres celdas y punto, sin fondos sobrepuestos ni nada... ¿Qué creéis que debería hacer?

youneedtotalk · #11 (**permalink**) 24/11/2009, 11:10

Espero no llegar tarde , hace tanto tiempo....
Bueno, simplemente añade esta línea al CSS del div izquierdo (margin-left, para el derecho) ò los 2 al div central, donde gustes. Yo lo veo bien con -3px, tú verás:
*html #div_cab_iz {margin-right: -3px;}

Por razones de peso los navegadores de "verdad" cogerán los divs # y Exploiter el *html
Es un hack muy sencillo que funciona siempre

Saludos

JavierB · #12 (**permalink**) 24/11/2009, 11:11

Hola youneedtotalk

Te recuerdo el aviso que había al final de este tema y que parece que no has leído.

Tema cerrado.