Problemas con zona activa :hover y css

[meister256]

Hola a todos, sigo con el desarrollo de mi web, y me he encontrado con el siguiente problema.

Resulta que los navegadores vuelven a ponerme las cosas difíciles, y en este caso ha sido firefox.

He conseguido que al pasar el cursor por la celda <td> que contiene una imagen, aparezca a los costados de dicha imagen, una imagen de una flecha señalando en cada dirección, y que éstas aparezcan solo cuando haya más registros en el sentido que indican (ésto ya es php, me voy por las ramas).

Al grano, en google chrome e IE 8 funciona a las mil maravillas, pero en firefox al pasar el cursor por la zona "activa", no sucede nada.

Este es el código css de la zona donde sucede la acción:

Código:

.media-content .film-strip-wrapper { width:942px; height:655px; background:no-repeat; margin:8px auto 0 }
.media-content .film-strip-wrapper .ajax-frame { width:942px; height:655px; position:relative }
.ie6 .media-content .film-strip-wrapper .ajax-frame { width:942px }
.media-content .film-strip-wrapper .ajax-frame .paging-arrow { background-repeat:no-repeat; display:none; height:85px; width:56px; position:absolute; top:288px }
.ie6 .media-content .film-strip-wrapper .ajax-frame .paging-arrow { display:block }
.media-content .film-strip-wrapper .ajax-frame .paging-arrow.next { right:-9px; background-position:-165px -436px }
.ie6 .media-content .film-strip-wrapper .ajax-frame .paging-arrow.next { right:-13px }
.media-content .film-strip-wrapper .ajax-frame .paging-arrow.next:hover { background-position:-322px -436px }
.media-content .film-strip-wrapper .ajax-frame .paging-arrow.previous { left:-9px; background-position:-94px -436px }
.media-content .film-strip-wrapper .ajax-frame .paging-arrow.previous:hover { background-position:-251px -436px }
.media-content .film-strip-wrapper .ajax-frame:hover .paging-arrow { display:block }
.media-content .film-strip-thumb-wrapper { display:block; height:75px; width:120px; margin-bottom:15px; background-repeat:no-repeat; -moz-box-shadow: #000 0 0 10px; -webkit-box-shadow: #000 0 0 10px; box-shadow: #000 0 0 10px }
.media-content .film-strip-thumb-frame { display:block; height:75px; width:120px; background-repeat:no-repeat; background-position:-80px 0 }
.media-content .film-strip-thumb-wrapper:hover .film-strip-thumb-frame { background-position:-80px -75px }
.media-content .video-thumbnails .film-strip-thumb-wrapper:hover .film-strip-thumb-frame { background-position:-80px -150px }
.media-content #film-strip .active-film-strip-thumb-wrapper .film-strip-thumb-frame { background-position:-80px -225px }

Código HTML y PHP de la caja:

Código PHP:

 <DIV class=film-strip-wrapper> 
  <DIV class=ajax-frame> 
<TABLE id="film-strip-thumb-wrapper"> 
  <TBODY> 
  <TR> 
   
    <TD id=film-strip-ajax-target align="center"><DIV class=magnifying-wrapper  
      onclick="Lightbox.loadImage([{ path: '', src:'../../../<?php echo $row[foto] ?>'}])"><SPAN  
      class=magnifying-glass></SPAN><IMG height="450" alt="" src="http://www.forosdelweb.com/../<?php echo $row[foto] ?>"></DIV><br> 
        <br><br>  <? echo nl2br($row["descripcion"]) ?> 
   </TD></TR></TBODY></TABLE> 
     
    <? 
    $id = (int)$_GET['id']; // if isset(... 
    $query = mysql_query(" 
        select 
            *, 
            (select max(id_foto) from galeria where id_foto < $id AND temagaleria LIKE $temagaleria) minimo, 
            (select min(id_foto) from galeria where id_foto > $id AND temagaleria LIKE $temagaleria) maximo 
        from galeria 
        where id_foto = $id AND temagaleria LIKE $temagaleria"); 
     
    $data = mysql_fetch_array($query); 
    if ($data) { 
        if (!is_null($data['minimo'])) echo '<a class="paging-arrow previous" href=index.php?seccion=imagen&id=' . $data['minimo'] . ' title="Anterior"></a>'; 
        if (!is_null($data['minimo']) && !is_null($data['maximo'])) echo ' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; '; 
        if (!is_null($data['maximo'])) echo '<a class="paging-arrow next" href=index.php?seccion=imagen&id=' . $data['maximo'] . ' title="Siguiente"></a>'; 
    } else { 
        $query = mysql_query(" 
            select min(id_foto) minimo, count(*) cuenta 
            from galeria"); 
        if ($data) { 
            if ($data['cuenta'] != 0) 
                header('Location: index.php?seccion=imagen&id=' . $query['minimo']); 
            } else { 
            } 
        } 
        ?> 
</DIV></DIV>  

Disculpad el código php, simplemente lo puse, por si hacéis un cambio muy grande, que veais como está estructurado, para proteger un poco el formato PHP que bastante me ha costado desarrollar ^^

Las flechas tienen las clases paging-arrow previous y paging-arrow next respectivamente, y el css las muestra bien en google chrome e internet explorer 8 cuando el cursor pasa por su zona activa, pero eso no sucede con firefox...

Lo cierto es que tengo un cabreo con el versionado de cada navegador... lo que funciona en uno en otro no te lo reconoce y viceversa ^^

Bueno, espero que me podais echar un cablecillo, supongo que el error está en en código que os he dado, espero que no esté en otro sitio porque sino hay para rato, y no creo que estéis dispuestos a revisar como 600 líneas de código css :P

Un saludo y gracias