Imagen de portada blog no se encuadra bien.

[Tarrika]

Muy buenas, haber si me podeis hechar una mano con una imagen de mi blog que me lleva de cabeza.
El blog es este: http://tarrikairenofansub.blogspot.com
El caso es que en la imagen de portada que tengo en Header, se puede apreciar que en la parte inferior, la imagen no llega a cubrir todo el espacio que deberia. He revisado el HTML pero no encuentro el error. Teneis idea de que se trata?

Muchas gracias de antemano.

[emprear]

Tarrika:
No lo tomes a mal, pero tu css es un caos, de todas maneras creo haber corregido a medias tu problema,

tu css actual:

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header img {
margin-left: auto;
margin-right: auto;
}

modificando como sigue podemos corregir bastante el problema:

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
height: 242px;
}
#header img {
margin-left: auto;
margin-right: auto;
height: 246px;
}

pero como te dije, es a medias, porque hay un problema con la imagen en si misma. Con lo anterior, la espalda del personaje de la izquierda encaja perfectamente en la esquina inferior izquierda del div, pero si vas siguiendo hacia la derecha, al parecer la transparencia del PNG no tiene el mismo indice, hay como una especie de espacio mas claro que llega hasta la espalda del personaje de la derecha (el de pelo rubio), justo debajo del texto en japones.
Otra recomendación, intenta reducir el peso de las imágenes, del header y de la de fondo, la carga es lenta y hay un desfasaje notorio entre las dos y a su vez con respecto a la carga general de la página. (yo trabaje sobre tu jpg de fondo y se puede reducir a unos 100kb, sin que pierda demasiado para verlo en la web.)

Las pruebas las hice con Firefox, no sé como se vera el nuevo CSS en otros navegadores.

Te dejo la muestra en http://foros.emprear.com/tarrika/tarrikaire.jpg

Saludos

[Tarrika]

emprear tienes razon es un caos, el caso es que es mi primer blog y para colmo he tenido que modificar mucho el diseño inicial.
Ya me he fijado en eso que pasa el parte inferior de la imagen pero no entiendo porque pasa, me parece rarisimo que sea culpa de la imagen ya que el tamaño del lienzo de esta es fijo. Aun asi le he hecho un apaño (que no gusta la verdad ) para arreglarlo un poco.
No se si tambien entiendes de photoshop, pero te comento las pruebas que hice con la imagen:
- Esta está en PNG. ya que el fondo lo quiero transparente, y es donde da el fallo.
- La misma imagen pero a formato .JPG no puedo poner el fondo transparente pero si me arregla el problema.

Pero descartamos un error en el CSS?

Muchas gracias por la ayuda.

PD: Tienes razon, la imagen de fondo se puede reducir de peso, ya me pondre con ello tambien.

[emprear]

Tarrika:
no entiendo por que dices

Pero descartamos un error en el CSS?

El problema, está, o estaba mejor dicho, en las 2 cosas CSS y la imágen. Pero por lo visto alguna modificación ya has hecho, recien entre a tu página y la imagen ya encuadra bien y solucionaste lo del png agregando esos simbolos como relleno.
Yo uso poco el Photoshop, las transparencias las suelo hacer en Fireworks, asi que no sabria decirte.
Ahora creo que está mejor, ya probé con IE 7/8, Opera 10 y Firefox 3.6 y en todos se ve bien.

Saludos

[Tarrika]

Lo decia porque me extrañaba que la misma imagen, cambiandole el formato si encuadrase bien sin tener que aplicar ese "relleno" en la parte de abajo. Por eso queria asegurarme de que, aplicando las pautas que tu me distes, ya no habria un problema en la forma del HTML de mi blog. Por lo que entiendo ya no hay errores en él pues (que sea un caos es otra cosa jejeje).
Bueno pues nada tendré que conformarme con dejar la imagen con esos simbolos de relleno.

Muchas gracias por la ayuda prestada emprear.
Saludos.

[Tarrika]

Lo he solucionado, te lo explico por si tienes curiosidad sobre de que se trataba:

Mi CSS estaba asi:

Código CSS:

#header { 
  margin: 0px;
  border:0px solid #000000;
  text-align: center;
  color:$pagetitlecolor;
  background-color:#transparent;
  background-image:url(http://content.pimp-my-profile.com/tp/000000-70-tp.png);
}
 

Entonces lo único que he tenido que hacer es borrar las 2 ultimas lineas:

Código CSS:

#header { 
  margin: 0px;
  border:0px solid #000000;
  text-align: center;
  color:$pagetitlecolor;
}
 

Y listo! Es que me parecia rarisimo que la imagen estuviera mal.
De todos modos, por supuesto te agradezco el tiempo que te has tomado en mi problema.

Saludos!

[emprear]

Me alegro. Y damos por concluido este tema.
Cualquier otra duda, por aquí estaré.
Saludos