Foros del Web » Creando para Internet » CSS »

Fondo que se repite, hace cosas raras en IE6

Estas en el tema de Fondo que se repite, hace cosas raras en IE6 en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/06/2008, 10:35
 
Fecha de Ingreso: junio-2008
Mensajes: 7
Antigüedad: 9 años, 6 meses
Puntos: 0
Fondo que se repite, hace cosas raras en IE6

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.
  #2 (permalink)  
Antiguo 12/06/2008, 10:54
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Fondo que se repite, hace cosas raras en IE6

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.
  #3 (permalink)  
Antiguo 12/06/2008, 11:01
 
Fecha de Ingreso: junio-2008
Mensajes: 7
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Fondo que se repite, hace cosas raras en IE6

Cita:
Iniciado por Mikmoro Ver Mensaje
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.
  #4 (permalink)  
Antiguo 12/06/2008, 11:05
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Fondo que se repite, hace cosas raras en IE6

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.
  #5 (permalink)  
Antiguo 12/06/2008, 11:41
 
Fecha de Ingreso: junio-2008
Mensajes: 7
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Fondo que se repite, hace cosas raras en IE6

Cita:
Iniciado por Mikmoro Ver Mensaje
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.
  #6 (permalink)  
Antiguo 12/06/2008, 11:46
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Fondo que se repite, hace cosas raras en IE6

Lo has solucionado bien.

También podrías hacer esto:

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

Mikel.
  #7 (permalink)  
Antiguo 12/06/2008, 15:15
 
Fecha de Ingreso: junio-2008
Mensajes: 7
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Fondo que se repite, hace cosas raras en IE6

Esto me lo apunto para la proxima, jeje, gracias.
  #8 (permalink)  
Antiguo 13/06/2008, 16:24
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 9 años, 7 meses
Puntos: 43
Respuesta: Fondo que se repite, hace cosas raras en IE6

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..
Cita:
<body>
<div id="container">
<div id="sombra_izq"></div>
<div id="contenedor"></div>
........................................
<div id="sombra_izq"></div>
</div>
<body>
Cita:
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....
__________________
..::The Saint::..
El pesimista se queja del viento; el optimista espera que cambie; el realista ajusta las velas.
  #9 (permalink)  
Antiguo 13/06/2008, 16:37
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Fondo que se repite, hace cosas raras en IE6

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.
  #10 (permalink)  
Antiguo 13/06/2008, 16:47
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 9 años, 7 meses
Puntos: 43
Respuesta: Fondo que se repite, hace cosas raras en IE6

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
__________________
..::The Saint::..
El pesimista se queja del viento; el optimista espera que cambie; el realista ajusta las velas.
  #11 (permalink)  
Antiguo 13/06/2008, 16:57
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Fondo que se repite, hace cosas raras en IE6

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:

Cita:
<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?

Cita:
#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.
  #12 (permalink)  
Antiguo 13/06/2008, 17:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Fondo que se repite, hace cosas raras en IE6

¿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.
  #13 (permalink)  
Antiguo 14/06/2008, 08:20
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 9 años, 7 meses
Puntos: 43
Respuesta: Fondo que se repite, hace cosas raras en IE6

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... :)
__________________
..::The Saint::..
El pesimista se queja del viento; el optimista espera que cambie; el realista ajusta las velas.
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 18:50.