Problemas con Firefox al usar Position relative

[MarioAraque]

Bueno, estuve investigando un poco el error, pasa esto:

Se supone que tengo una palabra de titulo, la cual tiene abajo una imagen, pero la misma debe estar casi por encima del titulo, por lo que decidi usar position relative para subirla un poquito, y quede el efecto que me piden.
El tema es que, si muevo solo la imagen, el texto que tengo abajo se separa mucho de la misma, lo que me obliga a mover todo el contenido que esta abajo del titulo un poco mas arriba.

Al hacer esto, en firefox, los links que quiero poner dejan de funcionar, cuando paso atraves de ellos no cambia el cursor, nisiquiera me muestra el title que le puse a cada uno de ellos, pero en internet explorer si.

Código:

<div id="center">
                <h1>Rescuer</h1>
                <div>
                <img src="images/img_central.jpg" />
                <a href="#" title="Demostraci&oacute;n" class="video"><img src="images/icono.jpg" /></a>
                <p>Aca iria texto sin relevancia</p>
                <p class="caracteristicas">
                    <img src="images/ico_pdf.jpg" border="0" />
                    <a href="#" title="Caracter&iacute;sticas">Hoja de caracter&iacute;sticas</a>
                </p>
                </div>
            </div>

Y la clave esta aca:

Código:

#center div{
  position: relative;
  top: -40px;
  z-index: -1;
}

Si quito el position: relative y el top-40 funciona todo bien, pero la imagen se baja y no se ve tal como se muestra en estos momentos en el link que mostrare de nuevo abajo.

http://www.juegodetenisalkon.com/tarea/

Comprueben con IE y con FF como el icono de la camarita, y el de Hoja de características no funciona en FF pero si en IE

Nunca habia tenido tantos problemas como hoy =S

Saludos.

[DragonX]

en IE7 todo el menu se rompe, ¿eso lo viste?

[MarioAraque]

Ah no, yo tengo IE 8 ... cual menu se rompe? uf...me quiero morir.

Saludos.

[DragonX]

el menu principal pero no desesperes, proba poniendole a la line ul.menu li un display:inline;

[MarioAraque]

Ahi agregue lo que vos me dijiste, se ve bien?

Y el problema que comente yo saes como solucionarlo? Porque no soy de usar mucho la propiedad position:relative .... pero esta claro que al usarla pierdo todos los enlaces en Firefox =(

Muchas gracias de verdad.

Saludos.

[DragonX]

bien ahi quedo 10pts!

Ahora la verdad no entiendo bien el problema que tenes y donde esta, podrias explicarmelo un poco mejor!

un abrazo

[MarioAraque]

Gracias por tu ayuda!!

Mira, el tema es asi, vos viste, en el codigo, el <h1>Rescuer</h1>? Bueno abajo de esa etiqueta hay una imagen, que si la ves bien, esta un poco subida, porque tiene que estar la antena ( o lo q sea ) de ese aparato a la altura del titulo.

Para hacer ello use la propiedad position relative:

Código:

#center div{
  position: relative;
  top: -40px;
  z-index: -1;
}

y lo subi un poco arriba a todo lo que habia abajo del h1, puesto que si solo subia la imagen , lo demas iba a quedar muy alejado (la posicion relativa de la imagen provoca eso).

Entonces, no me di cuenta, pero al hacer todo esto, los enlaces (la camarita q esta abajo a la derecha de la imagen y el texto en pdf) en Firefox no me los reconoce, pero en IE si, lo vas a poder notar facilmente.

Yo se q es por eso, pq quite esa propiedad y anduvo todo bien, pero lo malo es q se me movio la imagen abajo.......quitandome el efecto que yo busco.

Espero que te haya servido la explicacion, cualquier cosa posteo de nuevo.

Saludos.

[DragonX]

la verdad no termino de entender, yo veo la antenita del aparato ese a la misma altura de donde temrina el <h1> en FF y en IE7

[MarioAraque]

Nono, eso esta bien.
Lo que esta mal son los links de la parte central. No ves abajo a la derecha de la imagen como una camarita? Es un enlace con una imagen, que en FF no la reconoce, pero en IE si.

Lo mismo ocurre con el PDF de abajo, lo demas esta bien. La antena del aparato esta a la altura, pero hacer eso provoca el error que ya te comente.

Saludos.

[DragonX]

ok, lo veo bien en los dos, aparece la img y en los dos browsers esta ubicada en la misma posicion, pero en ninguno de los dos te anda el link....

[MarioAraque]

Si te fijas en el codigo fuente, vas a ver que son links

Código:

<a href="#" title="Demostraci&oacute;n" class="video"><img src="images/icono.jpg" /></a>

Ese es el de la camarita q sale abajo a la derecha del aparate ese grande. Y en IE 8 lo veo bien, pero en FF no.

Es que nisiquiera se que poner en google como busqueda para encontrar un caso parecido....

Saludos.

[DragonX]

a ver, vos queres que ese boton camarita sea un link que ande?? y apunte a otro html/php?

[MarioAraque]

Claro! Ahi puse la maquetacion y el enlace no manda a ningun lado (puse un #)...pero se supone que es un enlace que envia a otro html/php.

Lo mismo con el enlace de pdf, el texto que esta al lado de la imagen es un link, que no se ve.

Y bueno, yo quiero q se vea.

Saludos.

[jomaruro]

Hola:

No sé si lo has arreglado ni que versión de FF tienes pero en el mío (ver. 3.5.5) los enlaces funcionan perfectamente, vamos aparece la mano como ocurre normalmente.

Saludos.

[MarioAraque]

Hola jomaruro,

Ahora se ve bien porque quite el position relative y deje la imagen debajo del titulo (Rescuer).

En realidad queria enviarlo un poco mas arriba, pero al hacer eso los links me dejaban de funcionar en FF, por lo que preferi cancelarlo...ya que no encuentro ningun tipo de solucion. Para colmo no se que poner como motor de busqueda y encontrar otros ejemplos parecidos.

Saludos.

[nuss]

Bueno te cuento, posiblemente puedas arreglarlo si ponés z-index: 999; esto pasa por que queda abajo de otro div transparente y entonces tapa el link.

Ya se que es viejo el post pero al menos queda de referencia.