Problema con div e imágenes en Firefox

stj-snake

Saludos,

Estoy intentando diseñar unos divs con unas imagenes en los bordes y resulta que en IE7 me lo muestra correctamente pero en FireFox no, para que podais entender mejor a lo que me refiero aqui les dejo dos fotos, una con IE7 y otra con FF3:

IE7 - http://img18.imageshack.us/img18/7913/ie7f.jpg
FF3 - http://img18.imageshack.us/img18/2561/ff3n.jpg

Tambien les dejo el código CSS que estoy usando para ver si me pueden ayudar a encontrar el error para poder arreglar este problema.

spoiler

Un cordial saludo

suaveSHOW

Prueba a poner

background-position:center;
stj-snake

Pues lo he probado y no ha funcionado :(, espero más sugerencias...

Un cordial saludo.

suaveSHOW

Si quieres, me puedes pasar el html con el div y imagenes de fondo, así viendolo yo no te puedo ayudar más ejj.

Si otro sabe, pues mejor.

Crawler

efectivamente, pon el correspondiente código html y css y podremos ver por donde peta ;)

stj-snake

Bueno, pues aqui os dejo el codigo html y el css, es posible que tenga algunos errores de novato ya que aun me considero un principiante en el diseño web.

<div id="cont">
<div class="fcv2"></div>
<div class="fcv4">
<span class="txttituloc">Actividades desarrolladas en el sector Industrial:</span>
		<p class="contenido">
        Proyecto de Actividad<br/><br/>
		Dise&ntilde;o Industrial<br/><br/>
		Plantas y Naves Industriales<br/><br/>
		Ingenier&iacute;a de Procesos<br/><br/>
		Medio Ambiente<br/><br/>
		Energ&iacute;a:<br/><br/>
	  	<span class="contenido2">T&eacute;rmica Convencional</span><br/><br/>
		<span class="contenido2">Solar:</span><br/><br/>
		<span class="contenido3">T&eacute;rmica</span><br/><br/>
		<span class="contenido3">Fotovoltaica</span><br/><br/>
		<span class="contenido3">Termosolar</span><br/><br/>
		<span class="contenido2">E&oacute;lica</span><br/><br/>
		<span class="contenido2">Biomasa</span><br/><br/>
		Auditor&iacute;a Energ&eacute;tica en Industrias y en Procesos Industriales<br/><br/>
		Procesos Industriales
	</p>
</div>
<div class="fcv3"></div></div>
#cont {
	width: 717px;
	float: center;
	padding: 0px;
}

.fcv2 {
 	background: url(../Imagenes/cuerpoc.png) no-repeat top center;;
 	height: 20px;
 }

.fcv3 {
	background: url(../Imagenes/cuerpop.png) no-repeat top center;;
	height: 20px;
	margin: 0px 0px 10px 0px;
}

.fcv4 {
	padding: 0px 20px 0px 20px;
	margin: 0px;
 	background: url(../Imagenes/cuerpol.png) repeat-y center #FFFFFF;
 }

Como podeis ver he conseguido "arreglar" uno de los problemas y es que la cabezera y pie de la tabla salian alineadas a la izquierda, solo he creado un ID con el atributo "float: center;" , ya solo me queda arreglar el error de que entre la cabezera-cuerpo-pie hay como un salto de linea pero yo no he puesto ningun "br", aqui os dejo una foto para que lo veais mejor:

http://img57.imageshack.us/img57/3348/cuerpo.jpg

Crawler

vale, primero contesto a tus preguntas y luego te sermoneo un poco :P

Los divs están bien posicionados, en "todos" los navegadores están a la misma distancia, asi que el problema debe ser la imagen de fondo.

Prueba con:
.fcv2 {
background: url(../Imagenes/cuerpoc.png) no-repeat center bottom;
}

.fcv3 {
background: url(../Imagenes/cuerpop.png) no-repeat center top;
}

Si no recuerdo mal, primero va la posición en horizontal (center) y luego la vertical (bottom para una, top para la otra)

Para comprobar que las cosas estén en el sitio, añadeles siempre un borde de color chillón, a ver si están donde toca y el problema es otro (como creo que es tu caso)

.fcv2,.fcv3 {
border: 1px solid red;
}

.fcv4 {
border: 1px solid black;
}

Crawler

Y ahora el sermón (en plan colegueo para echarte una mano en cosas varias que creo que debes mejorar):

  1. Utiliza nombres de divs que referencien el contenido o la función que van tener. "fcv2" no me dice nada.
    Si prefieres mantener estos nombres por lo que sea, por lo menos numéralos correctamente! (ahora mismo tienes fcv2,fcv4,fcv3, cuando lo lógico seria fcv2,fcv3,fcv4 (por no mencionar que nos falta fcv1) Lo mismo para el nombre de las imágenes.
    Ahora sabes de sobra la diferencia entre cuerpoc, cuerpoP y cuerpol, pero dentro de unos meses cuando no lo tengas tan fresco, o cuando coja tu código otra persona (aunque sea en un foro para ayudarte) no queda claro que és cada cosa.

2 Estudiate las "listas" (ul,ol,dl...) Para hacer este ejemplo, no deberías usar párrafos y br para simular un listado, si no un listado tal cual.

3 float: center; no existe. Las opciones son: left, right, inherit, none.

4 (manías mías):
No utilices mayúsculas en los nombres de las carpetas: url(../Imagenes/cuerpol.png)
Te dará problemas en función de si el hosting es linux o windows.

Te pongo un ejemplo de como lo haría yo (tampoco lo haría asi, pero no voy a marearte al 100% :P)

<div class="bordeSuperior"> </div><!-- bordeSuperior -->
<div class="contenido">
    <p>Actividades desarrolladas en el sector Industrial: </p>
    <ul>
      <li>Proyecto de Actividad    </li>
      <li>Diseño Industrial    </li>
      <li>Plantas y Naves Industriales    </li>
      <li>Ingeniería de Procesos    </li>
      <li>Medio Ambiente    </li>
      <li>Energía:   
<ul> <li>Térmica Convencional </li> <li>Solar: <ul> <li>Térmica</li> <li>Fotovoltaica</li> <li>Termosolar</li> </ul> </li> <li>Eólica</li> <li>Biomasa</li> </ul> </li> <li>Auditoría Energética en Industrias y en Procesos Industriales </li> <li>Procesos Industriales </li> </ul> </div><!--contenido--> <div class="bordeInferior"> </div><!-- bordeInferior -->
stj-snake

ya encontre la solucion ^, solo he tenido que añadir "margin: 0px;" a las clases "txtcuerpo" y "lp".

Gracias por vuestra ayuda. Un cordial saludo :)

Usuarios habituales

  • stj-snake
  • Crawler
  • suaveSHOW