problema con espacios/lineas en ie6

[Snd234]

IE6, para variar...

Bueno, estoy traspasando un diseño que hice a HTML y cuando lo visualizo con IE6 me muestra lo siguiente:



Me muestra un espacio horizontal entre cada capa, siendo que deviera de verse asi:



El codigo HTML que llevo hasta el momento es el siguiente:

Código PHP:

  <div id="wrapper">
    <div id="header-wrapper"></div>
    <div id="blue-wrapper"></div>
    <div id="content-wrapper">
        <div id="content_top"></div>
        <div id="content_main">
            <div id="content">
                <p>contenido</p>
                <p>contenido</p>
                <p>contenido</p>
            </div>
        </div>
        <div id="content_bottom"></div>
    </div>
    <div id="footer_main">
        <p id="footer_text">bla bla bla bla...</p>
    </div>
    <div id="footer_bottom"></div>
</div> 
   

Mientras que en la hoja de estilo tengo:

Código PHP:

  #wrapper {
    width: 816px;
    margin: 0px auto;
}

#header-wrapper {
    height: 116px;
    background-image: url(images/header.png);
    background-repeat: no-repeat;    
}

#blue-wrapper {
    height: 112px;
    background-image: url(images/blue_bg.png);
    background-repeat: no-repeat;
    background-position: center;
}

#content_top {
    height: 12px;
    background-image: url(images/content_top.png);
    background-repeat: no-repeat;
}

#content_main {
    background-image: url(images/content_bg.png);
    background-repeat: repeat-y;
    background-position: top center;
    position: relative;
}

#content_bottom {
    height: 12px;
    background-image: url(images/content_bottom.png);
    background-repeat: no-repeat;
}

#content {
    padding: 8px 16px;
}

#footer_main {
    height: 28px;
    background-image: url(images/footer_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

#footer_bottom {
    height: 8px;
    background-image: url(images/footer_bottom.png);
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

#footer_text {
    color: #FFFFFF;
    text-align: center;
    padding-top: 8px;
} 
   

Cual puede ser el problema? y alguna solucion?

[fearlex]

Varios problemas:

Primeramente, el div que contiene los 3 p tags, tienes que definirle un height, ponle auto si este crece, y si tiene un alto fijo, pues declaralo. la etiqueta p que se encuentra en el footer, debes removerle el padding top y darle ese espacio con el propio div que lo contiene. Seria un poco mas facil, si dieras el link de la pagina, y se pudiera modificar el codigo para probar cuales son los distintos problemas/soluciones. Espero que eso te sirve.

Como consejo adicional, te aconsejo, utilizar propiedades abreviadas, no hay necesidad de usar esto:

Código PHP:

  #wrapper {
    width: 816px;
    margin: 0px auto;
}

#header-wrapper {
    height: 116px;
    background-image: url(images/header.png);
    background-repeat: no-repeat;    
}

#blue-wrapper {
    height: 112px;
    background-image: url(images/blue_bg.png);
    background-repeat: no-repeat;
    background-position: center;
}

#content_top {
    height: 12px;
    background-image: url(images/content_top.png);
    background-repeat: no-repeat;
}

#content_main {
    background-image: url(images/content_bg.png);
    background-repeat: repeat-y;
    background-position: top center;
    position: relative;
}

#content_bottom {
    height: 12px;
    background-image: url(images/content_bottom.png);
    background-repeat: no-repeat;
}

#content {
    padding: 8px 16px;
}

#footer_main {
    height: 28px;
    background-image: url(images/footer_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

#footer_bottom {
    height: 8px;
    background-image: url(images/footer_bottom.png);
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

#footer_text {
    color: #FFFFFF;
    text-align: center;
    padding-top: 8px;
} 
   

cuando puedes usar esto:

Código PHP:

  #wrapper {
    width: 816px;
    margin: 0px auto;
}

#header-wrapper {
    height: 116px;
    background: url(images/header.png) no-repeat;
}

#blue-wrapper {
    height: 112px;
    background: url(images/blue_bg.png) no-repeat center;
}

#content_top {
    height: 12px;
    background: url(images/content_top.png) no-repeat;
}

#content_main {
    background: url(images/content_bg.png) repeat-y top center;
    position: relative;
}

#content_bottom {
    height: 12px;
    background: url(images/content_bottom.png) no-repeat;
}

#content {
    padding: 8px 16px;
}

#footer_main {
    height: 28px;
    background: url(images/footer_bg.png) no-repeat center;
    position: relative;
}

#footer_bottom {
    height: 8px;
    background-image: url(images/footer_bottom.png) no-repeat center;
    position: relative;
}

#footer_text {
    color: #FFFFFF;
    text-align: center;
    padding-top: 8px;
} 
   

[Snd234]

Aun eliminando las etiquetas p el problema persiste:


Y sobre abreviar las propiedades, me gusta mas especificarlos por separado, cosas de gusto ;)

Alguien sabe que poder arreglarlo?... Aun no descubro como...

[Snd234]

Bueno, aqui dejo el enlace con la parte que me esta dando problemas.

http://www.kibit.cl/ejemplos/html/problema/index_.html

Usando FF, IE7 u Opera las capas estan perfectamente "unidas", mientras que con IE6 se ven especios entre algunas capas...

Espero que ahora si alguien sepa que puede ser y como arreglarlo