lo mismo de siempre, que nadie sabe solucionar

[nemodigital]

He revisado el foro de arriba a bajo, pues encuentro el mismo tema por varios sitios y nadie da una solución.

A todos nos pasa el mismo problema con IE6, los divs se van a hacer esparragos.
En mi web: www.villenadiario.com, se ve cojonudo en IE7, firefox y safari.
Pero cuando llegamos a IE6, se va a la leche, todavía no he encontrado a nadie en un mes que me diga pon esto y se coloque el div arriba y el div de la derecha, tambien arriba.
Estoy desesperado, no se que hack utilizar, he buscado por todo internet.
Porfavor, darme una esperanza, una noche tranquila. jejejej.
Gracias por escucharme.

[pzin]

No te desesperes, todo tiene solución.

¿Hay algo de código que nos puedas mostrar?

[nemodigital]

solo con responderme ya me haces feliz, jejejej.
Si te mando el codigo es bastante largo, te es mas facil ver la web: www.villenadiario.com

Pero como comento es solo en IE 6, y da la casualidad que es ese explorador unos de los mas usados por la gente que usa este periodico local.

[pzin]

Buenas.

Sinceramente, pensaba que era peor. Esto es normal que ocurra.

Por ejemplo, la capa de la decha, donde tienes el vídeo, patrocinadores y demás, suele ocurrir, porque IE6 no entiende el modelo de cajas, y es como si tuviera una regla propia para medir las cosas.

Prueba a, para solucionar esto al menos (luego seguimos mirando :P), a poner un estilo, con el mismo ID que solo funcionaría en IE6 (es importante que la declaración del estilo de este ID sea posterior a la declaración "normal") con algo menos de width.

Sería algo así:

Código:

/* hack-ie6 */
* html #derecha {
width:20%; /* No miré las medidas que usas, pero debe de ser algo menor */
}

[nemodigital]

Gracias Bonez por brindarte a echarme una mano, te lo agradezco mucho.

Te pongo al día:
tengo un archivo css llamado principal.css, el cual llama a otro: @import url(pantalla.css);
lo hago así para luego poder llamar a otro para imprimir; también hay otro archivo css: ie_6.css al cual llamo mediante: <!--[if IE 6]> <link href="ie_6.css" rel="stylesheet" type="text/css"> <![endif]-->.

He colocado el codigo que me dices y si, se hace la caja derecha mas pequeña, pero dicha caja tiene otro css, que está en pantalla.css, que hace que esta caja muestre ese borde doble. Bueno, te pongo aqui el codigo del borde de la caja derecha:
/*codigo de la caja derecha*/
/* CSS for the box starts here
================================================*/
/* Default styling. Used when JavaScript is unsupported */
.cbb {
padding:0 10px;
margin:1em 0;
background:#fff;
border:1px solid #666;
}
.cbb h1 {
margin:0 -10px;
padding:0.3em 10px;
background:#efece6;
font:bold 1.2em/1 Arial, Helvetica, sans-serif;
}
/* Insert the custom corners and borders for browsers with sufficient JavaScript support */

/* Two of the boxes are floated just for this demo. Adjust to your needs. */
.cb {
width: 100%;
margin:0em 0;
}
.two {
width:100%;
float:left;
}
.three {
width:100%;
float: left;
}
/* Rules for the top corners and border */
.bt {
background:url(img/bordes/box.png) no-repeat 100% 0;
margin:0 0 0 18px;
height:17px;
}
.bt div {
height:17px;
width:18px;
position:relative;
left:-18px;
background:url(img/bordes/box.png) no-repeat 0 0;
}

/* Rules for the bottom corners and border */
.bb {
background:url(img/bordes/box.png) no-repeat 100% 100%;
margin:0 0 0 12px;
height:14px;
}
.bb div {
height:14px;
width:12px;
position:relative;
left:-12px;
background:url(img/bordes/box.png) no-repeat 0 100%;
}

/* Insert the left border */
.i1 {
padding:0 0 0 12px;
background:url(img/bordes/borders.png) repeat-y 0 0;
}
/* Insert the right border */
.i2 {
padding:0 12px 0 0;
background:url(img/bordes/borders.png) repeat-y 100% 0;
}
/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
background:#fff;
border:1px solid #fff;
border-width:1px 0;
padding:0 10px;
}
/* CSS for the box ends here */

/* You can use different borders for different boxes on the same page. Just adjust the CSS. The following is an example that uses the GIF images instead of the PNG images. Note that you can also adjust borders, heights and paddings this way. Remember to adjust the IE CSS as well. */
.three .i1,
.three .i2 {
background-image:url(img/bordes/borders.gif);
}
.three .bt,
.three .bt div,
.three .bb,
.three .bb div {
background-image:url(img/bordes/box.gif);
}
/* Just a bit of styling for this example. Adjust as you wish. */
.cb h1 {
margin:0 -10px;
padding:0.3em 10px;
background:#efece6;
font:bold 1.2em/1 Arial, Helvetica, sans-serif;
}
.cb p {
font-weight: normal;
}
/*FIN CAJA DERECHA*/

He dejado la caja derecha al 20% comno me propones para que la veas en IE6, pero ya te digo, no consigo ponerla en su sitio, ni la derecha, ni la izquierda.

Gracias de nuevo por tu interes, me estas ayudando mucho.

[pzin]

Estoy haciendo pruebas y mirando el código.

Algo curioso, es que cambiando el width de #general al 100%, se ve bien.

A ver qué mas descubro.

[nemodigital]

he solucionado algo de momento.
en el archivo ie6.css he puesto losiguiente:

/* hack-ie6 */
* html #derecha {
width:23%; /* No miré las medidas que usas, pero debe de ser algo menor */
position: relative;
left: -28%;
}
* html #general {
width:80%; /* No miré las medidas que usas, pero debe de ser algo menor */
float: center;
margin-top: -5px;
}
y por lo menos ya sale derecha en su sitio.
Ahora queda el expacio entre la cabecera y el primer titular y general que está a 80%, no lo puedo poner mas bajo, o sea, a 70% ni mas bajo, porque entonces derecha se pone otra vez bajo del todo.
Bueno algo es algo, asi se ve mejor que antes, pero haber si investigando un poco mas conseguimos quitar el espacio entre cabecera y titular y el espacio en blanco de la derecha y ami en mi ie6 me aparece una advertencia que aparece por lo menos 6 ó 7 veces y le tengo que dar al enter, supongo que será una advertencia de los videos y flash, digo yo.
Poco a poco.

[nemodigital]

por lo visto solo se ve medio bien en mi monitor de 20 pulgadas. Segun me comentan en uno de 14, no se bien todavía, sigue saliendo la barra derecha bajo del todo.

[pzin]

S usas medidas fijas, que en tu caso, están optimizadas para una resolución de 800*600, no puedes pretender tampoco que funcione en monitores muy pequeños, ya que el ancho de estos suelen ser pequeños.

Yo ultimamente siempre trabajo con medidas porcentuales, que al principio cuesta algo adaptarse, pero es cosa de un momento.

[nemodigital]

por finnnnnnnnnnnnn, he podido arreglar algo.
No me lo puedo creer.
Gracias a Bonnet, me despejó la mente, pero en realidad, nadie ha sabido hecharme un cable. Nadie me ha sabido decir pon esto ó aquello.
El unico me despejo algo la mente fue Bonnet, gracias por tu ayuda.

Por fin se ve en su sitio.

[nemodigital]

se me ha olvidado poner el css, hay va:

#izqui {
margin-top: -90px;
width: 480px;
}
* html #derecha {
margin-top: auto;
}
* html #derecha {
position: relative;
margin-top: -3580px;
margin-left: 245px;
}

[jotap]

hola: me colo en este hilo para agradecer a Bonez también, ya que estaba buscando cómo solucionar un problema de visualización en IE6, con varias cajas flotantes,

y con el

Código HTML:

/* hack-ie6 */
* html

le he encontrado la solución al problema, muchas gracias....
saludos

[K3NNY]

Diseñar en CSS para Firefox, IE6 e IE7 ;)