Espacio en Blanco entre imagenes

[uokesita]

Hola. quisiera que me ayudaran a saber que pasa con mi codigo..

Tengo en el footer de mi pagina dos columnas que a su vez tienen una imagen top para el borde superior una imagen q se repite para el contenido y una imagen inferiror para el borde de abajo..

Pero algo me esta saliendo mal. ya que entre el borde superior y el contenido deja un espacio en blanco y esto no sucede con la parte inferior.. aca la pagina para que lo vean
http://usuarios.lycos.es/uokesita/2.0/index.php

De verdad que no veo donde tengo el fallo, entonces a ver si me hechan una mano y me dicen donde tengo el error



estilo del footer css

Código HTML:

div.footer {
	width:1000px;
	height:auto;
	margin-left:100px;
	margin-top:30px;
}
div.footest {
	float:right;
	width:200px;
	height:auto;
}
div.foot1 {
	float:left;
	width:350px;
	height:auto;
}
div.foot2 {
	float: right;
	width:350px;
	height:auto;
	margin-left:500px;
}
div.foottop {
	background: url(img/foottop.png);
	background-repeat:no-repeat;
	height:10px;
	width:350px;
}
div.footbg {
	background:url(img/footbg.png);
	background-repeat: repeat-y;
	width:340px;
	height:auto;
}
div.footbottom {
	background:url(img/footbottom.png);
	background-repeat:no-repeat;
	height:10px;
	width:340px;
}

parte del archivo footer.php

Código PHP:

   
 
     <div class="footer"> 
          <div class="footest"> 
               <div class="sidetop">  
                    <span class="gris"> 
                    <center> 
                         Estadisticas 
                    </center> 
                    </span>  
               </div> 
               <div class="sidebg"> 
                    <center> 
                    <center> 
               </div> 
               <div class="sidebottom"></div> 
          </div> 
           
          <div class="foot1"> 
               <div class="foottop"></div> 
               <div class="footbg"> 
               <center> 
               <span class="gris"> 
               Espacio disponible para publicidad 
               </span> 
               </center> 
               </div> 
               <div class="footbottom"> </div> 
          </div> 
           
          <div class="foot2"> 
                  <div class="foottop"></div> 
                    <div class="footbg"> 
                       <center> 
                       <span class="gris"> 
                       Espacio disponible para publicidad 
                       </span> 
                       </center> 
                    </div> 
                    <div class="footbottom"> </div> 
          
          </div> 
           
          <div class="creditos"> 
          <span class="negro"> 
          Todos Los Derechos Reservados &copy; 2008  || Conacto Web: <a href="mailto:[email protected]">[e-mail]</a> 
          </span> 
          </div> 
           
     </div>  
   

otra cosa.. como hago para solucionar el problema que se ve cuando abro la pag en firefox. es decir el footer queda inmediatamente pegado donde termina el contenido central de la pag.. haciendo que la columna de estadisticas se monte sobre la de publicidad :S en internet explorer se ve tal cual como lo quiero (las pocisiones)

[Mikmoro]

El primer problema y su solución te van a parecer increibles: la cosa es que como tu pones un div vacío para foottop, IE6 considera que ahí vas a poner texto. De esa menra, como el tamaño heredado es mayor que 10px, reserva el tamaño mínimo para el texto. Si pones:

font-size: 10px;

en ese div se solucionará.

Otra solución sería poner tu imagen en la parte interior, es decir:

div.foottop {
background: url(img/foottop.png) no-repeat center bottom;
height:10px;
width:340px;
}

Prueba a ver la que ás te guste.

El otro problema ahora miro a ver qué se ve.

Mikel.

[Mikmoro]

Creo que para el segundo problema deberías añadir un clear: both a footer(para que se vea como en IE6), porque si no sale al mismo nivel que el contenido de la izquierda. Esto sería.

div.footer {
width:1000px;
height:auto;
margin-left:100px;
margin-top:30px;
clear: both;
}

Ya probarás a ver y contarás.

Mikel.

[uokesita]

jajaja chanfles muchisimas gracias por tu ayuda.

probe con colocar el tamaño de letra, pero aun en 10px m dejaba espacio en blanco y lo reduje a 5px.. ahora ya no muestra ningun espacio... me pregunto porq si en las propiedades del borde inferior nunca especifique el tamaño de letra, con ese no me da problemas y lo muestra sin ningun espacio?

con respecto a lo de clear:both; me funciono tambien pero me deja la comlumna de estadisticas por fuera abajo (solo con firefox) me hechas otra mano?

gracias

[Mikmoro]

Mira, lo de los 10px que dices que con la imagen de abajo no te ocurre es lo siguiente: como te expliqué, esos dos bloques miden unos 16px cada uno (en IE), y tu imagen mide 10px. La de abajo te sale bien porque aunque su contenedor es mayor, si no le indicas otra cosa, el fondo se coloca en la parte superior de la caja, y por eso, aunque sea más grande la caja, la imagen sale pegada arriba.
Con la de arriba pasa lo mismo, pero como la tienes pegada a la parte superior de la caja, al no rellenarla deja un espacio vacío debajo. Podrías comprobarlo fácilmente probando la segunda solución que te di, es decir, pegando la imagen de fondo a la parte inferior de la caja:

div.foottop {
background: url(img/foottop.png) no-repeat center bottom;
height:10px;
width:340px;
}

y verás que se ajusta sin usar lo de los 5px.

El otro asunto le echo un vistazo luego a ver si se ve qué pasa.

Mikel.

[uokesita]

ahhhhh cierto.. gracias por explicarme

[Mikmoro]

Hola otra vez.

En cuanto al problema pendiente, mi dificultad para ayudarte es que no sé cómo quieres que quede. Yo ahora lo veo prácticamente igual en IE6 que en FF. No sñe cuál debe ser el resulado final, así que es difícil saber.

Mikel.

[uokesita]

Si tienes razon ya se ven iguales... solo que ayer no se veian iguales.. :s pero bueno.. ya esta arreglado muchas gracias por tu ayuda