Fondo que se repite, hace cosas raras en IE6

[icarlos]

Hola a todos, he estado buscando por el foro pero como no he dado con una solución habro un nuevo tema a ver si alguien me puede ayudar.

En un theme para wordpress que estoy haciendo, tengo un problema con un fondo. El problema solo afecta a IE6 y menores versiones, en IE7 se ve bien. Resulta que el fondo pese a tener un repeat-y no se repite, mas bien se repite a trozos y, por ejemplo, pasando el raton sobre un enlace aparece y si lo quito vuelve a desaparecer, un lio vamos. El codigo que tengo puesto es el siguiente:

Código:

#contenido {
        color:#333;
        margin-left:240px;
        width:766px;
}
#contenido #contenidoarriba {
        background:url('images/cuerpoarriba.png') no-repeat 0 0;
        margin:0;
        padding-top:86px;
}
#contenido #contenidocentro {
        background:url('images/cuerpocentro.png') repeat-y 0 0;
        min-height:220px;
        margin:0;
        padding-left:60px;
        padding-right:50px;
}
#contenido #contenidoabajo {
        background:url('images/cuerpoabajo.png') no-repeat 0 0;
        margin:0;
        margin-top:-20px;
        *margin-top:0px;
        padding-top:100px;
}

El html completo es muy largo, asi que mejor os pongo la dirección donde esta la pagina y veis todo, http://chakin.byethost13.com/wordpress/.

Espero vuestra ayuda, gracias por adelantado, un saludo.

PD: ya se que los pngs no se van a ver en IE6, para eso tengo puesto otro css con esas imagenes en gif.

[Mikmoro]

Antes de seguir mirando, comprueba que esto no tenga nada que ver: recuerda que IE6 no entiende el min-height que tienes puesto en #contenido #contenidocentro, de tal manera que para ese elemento, como no tienes puesto ningún height, para IE6 no tiene tamaño de alto.

Mikel.

[icarlos]

Iniciado por Mikmoro

Antes de seguir mirando, comprueba que esto no tenga nada que ver: recuerda que IE6 no entiende el min-height que tienes puesto en #contenido #contenidocentro, de tal manera que para ese elemento, como no tienes puesto ningún height, para IE6 no tiene tamaño de alto.

Mikel.

Gracias Mikel.

He quitado el min-height para probar y nada sigue pasando, y es que no tengo ni idea de que puede ser, he revisado el codigo cientos de veces.

[Mikmoro]

No, no te decía que quitaras el min-height para probar, sino todo lo contrario, que para IE no tiene tamaño de alto. En lugar de quitarlo, cámbialo por un height:220px; a ver qué ocurre. Si no es eso, miramos a ver.

Mikel.

[icarlos]

Iniciado por Mikmoro

No, no te decía que quitaras el min-height para probar, sino todo lo contrario, que para IE no tiene tamaño de alto. En lugar de quitarlo, cámbialo por un height:220px; a ver qué ocurre. Si no es eso, miramos a ver.

Mikel.

Solucionado, parece que si, por lo menos ahora lo veo bien en los 4 navegadores.

Te cuento, he puesto el height:220px y en ie6 se ha solucionado, se ve todo correctamente, pero en los demas navegadores que estoy probando (firefox, opera, ie7), se ve exactamente eso, un alto de 220px, el resto no se ve con el fondo.

Si pongo el height con un * para que lo lea solo ie, en el 6 se ve bien, pero en el 7 se ve como se veia el 6 al principio , para que se vea bien en ie7 tengo que poner otra vez el min-height.

Entonces lo que he hecho ha sido lo siguiente: en el fichero css principal (estructura.css) he puesto el min-height:220px; y en el fichero para los hacks para ie6 (ieesunamierda.css) he puesto el height:220px; y parece que se ha solucionado.

Espero que siga asi mañana

Muchisimas gracias Mikel, sino fuera por tu ayuda jamas habria arreglado esto. Un saludo.

[Mikmoro]

Lo has solucionado bien.

También podrías hacer esto:

min-height: 220px;
height: auto!important;
height: 220px;

Mikel.

[icarlos]

Esto me lo apunto para la proxima, jeje, gracias.

[the_web_saint]

Hola..

Tengo un problema que tiene que ver con lo que decias del min-height Mikel.
Quiero que mi pagina tenga como minimo de altura el 100%.
Pero he usado esto que colocaste arriba y no me ha funcionado, ni para IE ni firefox.......

LA ESTRUCTURA QUE TENGO ES MAS O MENOS ESTA..

<body>
<div id="container">
<div id="sombra_izq"></div>
<div id="contenedor"></div>
........................................
<div id="sombra_izq"></div>
</div>
<body>

body {
font-family: Helvetica, Verdana, Geneva, Arial, sans-serif;
margin: 0;
font-size:13px;
background-attachment: scroll;
background-repeat: no-repeat;
background-color:#D8D8D8;
text-align: center;
}
#container
{
margin: 0px auto;
width:1014px !important;
width:1017px;
min-height:100% !important;
height:auto !important;
height:100%;
}
#contenedor
{
margin:0px;
padding:0px;
width:994px;
background-color:#FFFFFF;
background-image:url(../imagenes/fondo.jpg);
background-repeat:no-repeat;
background-position:top;
text-align:left;
float:left;
min-height:100% !important;
height:auto !important;
height:100%;
}
#sombra_izq
{
margin:0px;
padding:0px;
background-image:url(../imagenes/sombra_izq.png);
background-repeat:repeat-y;
background-position:top;
float:left;
width:10px;
}
#sombra_der
{
margin:0px;
padding:0px;
background-image:url(../imagenes/sombra_der.png);
background-repeat:repeat-y;
background-position:top;
float:left;
width:10px;
}
el problemas es que no acepta el min-height, se adapta a la altura de lo que tenga el contenedor dentro....

[Mikmoro]

Se debe a que no tienes tamaño en el body y al poner el 100% debe ser el porcentaje de su elemento padre, que como en este caso es body, le has puesto que tenga el 100% de... nada.

Añade a tu selector body un height: 100%; y debería funcionar.

Fíjate también que has puesto dos veces el id sombra_izq (<div id="sombra_izq"></div>), y eso no debes hacerlo. El id debe ser único. Para hacer eso deberías usar class.

Mikel.

[the_web_saint]

Hola
Gracias por tu pronta respuesta, me he equivocado jejeje la primera es sombra_izq, la segunda es sombra_der, en el codigo que tengo esta bn.
Ya le puse al body 100%, me ha funcionado en IE pero en mozilla no!!!.

No se que sucede ahora

[Mikmoro]

Hay una cosa que no estás haciendo bien:

lo mismo que te he dicho para el caso del body, es para todo el anidamiento, es decir, siempre que un elemento marque una medida en porcentaje, ese porcentaje se tomará con respecto a su elemento padre, de tal manera que para que funcione en un elemento, su antecesor deberá tener tamaño.

En tu caso, fíjate:

<body>
<div id="container">
<div id="sombra_izq"></div>
<div id="contenedor"></div>
........................................
<div id="sombra_izq"></div>
</div>
<body>

Container es hijo de body y contenedor hijo de container.
Pues bien, ¿qué tamaño tiene container?

#container
{
margin: 0px auto;
width:1014px !important;
width:1017px;
min-height:100% !important;
height:auto !important;
height:100%;
}

es decir, ningún tamaño definido, sino auto, de manera que un hijo suyo no puede tener tamaño en porcentaje con arreglo a "auto".

Mikel.

[Mikmoro]

¿Cómo lo puedes solucionar?

Empieza poniendo esto en tu css:

html, body {height: 100%;}

ahora, quita eso del selector container y déjalo así:

#container {margin: 0px auto;
width:1014px !important;
width:1017px;
height:100%;
}

Con lo que ya #contenedor te funcionará con esto:

#contenedor {margin:0px;
padding:0px;
width:994px;
background-color:#FF00FF;
background-image:url(../imagenes/fondo.jpg);
background-repeat:no-repeat;
background-position:top;
text-align:left;
float:left;
min-height:100% !important;
height:auto !important;
height:100%;
}

Mikel.

[the_web_saint]

Hola Mikel:

Si tienes toda la razón, he logrado solucionar el problema del contenedor con lo que me dijiste.
Pero aún tengo problemas con los div de sombra_iz y sombra_der.
Estos son div que tienen una imagen backbround en degradado de 10px; para que den la apariendia que tiene sombra el contenedor.
Pero si contenainer ya tiene un tamaño, no deberia funcionar si le coloco lo mismo que tiene contenedor??
Lo que he visto es que como container tiene un alto fijo, estos div por mas que cambie de altura el div contenedor estos siempre estarán en 100%??
Bueno esto sucede solo en mozilla.
debo agregar otra cosa a container??

Muchas gracias... :)