Dudas Hover y Active

[javi_cassi]

Hola chicos!!!
Cómo andáis por estos lares del foro???

Bueno, como véis vuelvo a darle de nuevo a esto de CSS, y parece que desde la competencia de enero hasta hoy se me ha olvidado casi todo... en fin.... desastre.

El caso es que estoy tratando de hacerle una web a un amigo, y ya está casi casi terminada. Sólo me faltan alguno retoques. La web: www.vientoymar.org

El caso es que uno de sus apartados, concretamente en este:
http://www.vientoymar.org/vuelta_al_...ripulacion.php

estoy haciendo un menu con la tripulacion.
Como véis, parece que está bien (no hagáis caso de la foto del barco del fondo, ya la cambiaré en su momento) Y digo esto, porque cuando haces el rollover, se ven bien los datos de cada persona. Eso está muy bien......
peeeeeeeeeeeeeeeeeeeeeeerooooooooooo tengo varios problemas:

- el primero es que en el ie6 no me funciona para nada. HORROR!!!! Y no sé por qué.
- Y el segundo es que además del hover, hago un active de manera que cuando pinchas sobre cada persona se te queda la informacion debajo. Como podréis ver funciona, pero si acontinuiacion hago rollover sobre otra persona se me solapa la informacion de uno y otro. Cómo puedo solucionar esto. He estado pensando y no veo modo alguno (creo qeu al final tendré que quitar el hover) Por cierto, la solucion de darle back ground no vale, porque se supone que la imagen del barco llegará hasta abajo por lo que no quiero ponerle fondo.

Así que ete ahí mi problema.
A ver si me podéis ayudar con el tema que me tiene frito.

Os adjunto el codigo html y el css para realizarlo todo.
Muchas gracias de antemano. Que tengáis un buen día.

HTML
EDITO (sólo os pongo dos a´s para no poner todo el codigo, que no aporta nada.

<div id="tripulantes">
<a class="trip" href="#nogo"><b>Ángel Sáinz de la Maza</b>
<span><img src="images/trip1.jpg" alt="Gelo" title="Gelo"/><br />
<ul>
<li>Comunidad Autónoma: Cantabria</li>
<li>Residencia: Astillero</li>
<li>Año nacimiento: 1.947</li>
<li>Profesión: Corredor de Seguros</li>
<li>Titulación náutica: Capitán de Yate</li>
<li>Experiencia en navegación de altura a vela:</li>
<ul><li>1.992-2004-2005 Cruce del Atlántico</li>
<li>1994- Azores-Vigo</li>
<li>2001 Azores-Fuengirola</li>
<li>2004-2006-2007-2008 Mediterráneo: Cerdeña, Mesina, Eólidas,
Jónicas, Túnez, Malta, Montenegro, Croacia, Atenas, Creta </li>
</ul>
</ul>
</span>
</a>
<a class="trip" href="#nogo"><b>Josefina Gonzalez</b>
<span><img src="images/trip2.jpg" alt="Piru" title="Piru"/><br />
<ul>
<li>Comunidad Autónoma: Cantabria</li>
<li>Residencia:Santiago de Cudeyo</li>
<li>Año nacimiento: 1.947</li>
<li>Profesión: Funcionaria Autonómica</li>
<li>Titulación náutica: Patrón de Yate</li>
<li>Experiencia en navegación de altura a vela:</li>
<ul><li>2004-2005 Cruce del Atlántico</li>
<li>2004-2006-2007-2008 Mediterráneo. Cerdeña, Mesina, Eólidas,
Jónicas, Túnez, Malta, Montenegro, Croacia, Atenas, Cíclades, Creta </li>
</ul>
</ul>
</span>
</a>
</div>

CSS

#tripulantes {
height:315px;
position:relative;
width:460px;
}

.trip {
cursor:pointer;
display:inline;
float:right;
margin:7px 10px;
text-decoration:none;
width:200px;
}

.trip span {
display:none;
width:440px;
}

.trip span img {
float: right;
padding: 25px 0px 0px 10px;
}

.trip:hover span {
display:block;
left:6px;
position:absolute;
top:100px;
z-index:20;
}

.trip:focus span, .trip:active span {
visibility: visible;
display:block;
left:6px;
position:absolute;
top:100px;
z-index:10;
}

[kseso?]

Hola Javi:
Cuanto tiempo. Encantado con tu vuelta.
Bueno, lo más relevante que veo en un vistazo superficial:
Tienes alojado en un enlace (<a...>) elementos que no puede contener, como es una lista de definición.
Creo que la superposición de los datos es porque su contenedor no tiene fondo para ocultar el anterior: .trip span
Los problemas con ie6, entre otras cosas, seguramente se deban a que aplicas las speudoclases a elementos que no son enlaces (.trip:hover span)

No se si será fallo mio, pero me parece que algunas propiedades no las está aplicando, según veo en fierebug.

Lo que intentas hacer, me recuerda bastante a las cajas que utilicé en Enero. El código provenía de aquí, quizás te ayude.

Un saludo, y disculpa la brevedad de la respuesta.

P.D.: Me gustó uno de los objetivos declarados: " Expandir la Cultura Marítima y de la Buena Mesa del Mar Cantábrico" ¿admiten acoplados?

[javi_cassi]

Hola Kseso, gracias por contestar!!!!

Creo que la superposición de los datos es porque su contenedor no tiene fondo para ocultar el anterior

Sí, seguro que es eso, es más, si le pongo background sale perfectamente, pero si hago esto pierdo la transparencia con la imagen de fondo (ahora la del barco es pequeña, pero se supone que llegará hasta el final). Por eso mi pregunta, queria saber si alguien sabía hacerlo de algun otro modo. No sé, cambiandole alguna otra propiedad en el hover, o algo así... seguiré investigando.

Y sí, el propósito es hacer parecido a lo que hiciste en la competencia... estudiaré los códigos.

Bueno, pues gracias por la ayuda prestada, a ver si lo saco pronto. Y respecto a lo de la buena mesa.... supongo qeu si

Ale, un abrazo y que tengáis buen día.
Por cierto, si a alguien se le ocurre como arreglar el problema de la superpoosicion que me diga!!!

[ivor]

La solución está en jQuery, podrías hacer un Slide 'On Click' y 'On Hover' respecto a IE echale una ojeadita a este selector de navegadores con Javascript... salva vidas ;) http://rafael.adm.br/css_browser_selector/