Problema en firefox/ie por espacio

[NaRanJiTo78]

Hola!

En la página http://www.solursa.com/contacto.php si se ve en ie, se acopla el cuadro azul del final(abajo del todo) con el final de la imagen de fondo sin problemas, pero si se ve en firefox, ésto no ocurre, deja un espacio en blanco.

Como podría solucionar éste problema?

Gracias

[juaniquillo]

Creo que te has complicado mucho la vida. Es un layout muy complejo para algo tan simple y como ambos IE y FF interpretan los tamaños de las fuentes, los padding y los margenes de los elementos. Si vas dando alto a cada celda individual al final tendrás un alto diferente para cada navegador. Podrías quitar altura para que el espacio de FF desaparezca pero eso hará en que IE parezca cortado. Eso pasa mucho cuando quieres forzar que un espacio tenga una altura específica.

Yo tu me replanteo el layout y primero hago el tamaño del background de la foto de la muchacha con audífonos del alto real, osea, quitarle el espacio en blanco para después ponerlo de fondo en un div:
http://img183.imageshack.us/img183/9...ofondo7ct7.jpg

Luego haces de nuevo la sección del medio usando un div del tamaño de esa imagen, le das márgenes de auto a los lados y le pones la imagen de fondo. Esta esta información CSS (yo le he puesto la clase de 'div_central':

Código HTML:

 .div_central{
    background: url(files/contactofondo7.jpg);
    height: 394px;
    width: 780px;
    margin-right: auto;
    margin-left: auto;
}

Si haces eso podrás empezar a trabajar con un alto que se verá igual en los dos navegadores:
http://juaniquillo.freehostia.com/fdw/Contacto2.htm

En ese div ya definido pones el formulario. También necesitas borrar la altura de la primera tabla, osea lo que dice 'height=304'. Si lo dejas te aparecerá un espacio de 1 pixel abajo de la tabla. En este caso esa altura no es necesaria ya que las imágenes se encargan de darle a la tabla la altura deseada.

[juaniquillo]

También te recomiendo que valides tu código y lo lleves al standard para XHTML Transitional, que es lo que estás usando ya, si el código es válido, tendrás menos problemas de visualización entre los navegadores.
http://validator.w3.org/

[Leop3]

Supongo ya lo corregiste, yo lo veo exactamente igual en los dos.

[NaRanJiTo78]

No entiendo, creo haberlo hecho como me has dicho, juaniquillo, pero la pagina me sale con error:

Código HTML:

body {
	margin-top: 0px;
	background-repeat: no-repeat;
	background-position:center;
	background-position:top;
}
.div_central{
    background: url(contactofondo8.jpg);
    height: 394px;
    width: 780px;
    margin-right: auto;
    margin-left: auto;

Que es lo que he puesto mal?

[NaRanJiTo78]

Haciendo pruebas y demás, ahora porque dentro de "div_central" no puedo insertar el formulario?
Porqué queda un miniespacio de 1px aproximadamente en cuanto empieza la imagen de la chica?

(http://www.solursa.com/contacto.php)

[juaniquillo]

Sobre el espacio de 1px lee el último párrafo de lo que escribí antes. Necesitas borrar la altura de la primera tabla. Para insertar el formulario no escojas el div, sólo da un click dentro de él e insértalo.

[NaRanJiTo78]

juaniquillo,por más que busco no encuentro ninguna tabla que ponga 'height=304'...

En cuanto a insertar el formulario,hago clic en el div, pero no se si esta mal configurado pero el cursor se pone encima del header al hacer clic, por lo que el formulario se inserta debajo de éste y desplazando la foto...

Como lo puedo solucionar?

Muchas gracias, un saludo

[juaniquillo]

Ya vi que pasa, la altura no esta pero tu imagen tiene una pequeña linea blanca arriba. Puedes usar el programa que usas para editar imágenes y quitársela o puedes usar la que yo hice:
http://localhost/proyectosphp/galeri...actofondo7.jpg

En cuanto a escribir en el div, DW no te deja escribir porque cuando un div está vacío es como si no existiera (algo que es erróneo). Ve a vista de diseño y escribe cualquier cosa dentro del div (es el único div que tienes en la página):



Una vez haces eso podrás dar click dentro del div.

[NaRanJiTo78]

Juaniquillo, he recortado de nuevo la foto, en teoria para eliminar dicha línea blanca, pero ésta sigue apareciendo...

He hecho lo mismo de poner un DIV en metodología, y con la foto recortada en PS sin ningñuna línea o espacio blanco, pero al insertarla como fondo en el DIV me sigue apareciendo...

Al ser éste problema en dos secciones diferentes, y en común tienen que están como fondo en el DIV, no será algún problema interno dentro de éste?

Muchas gracias!

[juaniquillo]

Yo todavía sigo viendo que la imagen tiene una linea blanca. Usa esta:
http://juaniquillo.freehostia.com/fd...actofondo7.jpg

[NaRanJiTo78]

Hola de nuevo, juaniquillo, poniendo un Div central de nuevo en inicio (http://www.solursa.com/index.html) como me dijiste en vez de un background genéricopara poner el simbolo de medicina más pequeño, pues me lo habian aconsejado visualmente, me ocurre que:

De los botones al pie de página hay mas espacio en IE que en Firefox...porque ocurre esto?

En teoria con el DIV no deberia de suceder esto no?

Muchas gracias

[juaniquillo]

es lo que te dije arriba de que ambos IE y FF interpretan de manera diferente los tamaños de las fuentes, los padding y los margenes de los elementos. Lo que se usa normalmente es quitar todos los márgenes y paddings y después definirlos uno mismo usando css. Para eso pones el siguiente css:

Código HTML:

 *{
  margin:0;
  padding:0;
 }

de la misma forma defines el tamaño de la fuente que usas como defecto ya sea en pixeles o ems:

Código HTML:

body{
  font-size:12px;
}

Te aconsejo que vayas pensando en leer algún tutorial sencillo de CSS ya que, si decides dedicarte a diseño web, será algo que vas a usar mucho.