Foros del Web » Creando para Internet » CSS »

Problemas con zona activa :hover y css

Estas en el tema de Problemas con zona activa :hover y css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/03/2011, 09:31
 
Fecha de Ingreso: febrero-2011
Mensajes: 9
Antigüedad: 6 años, 9 meses
Puntos: 0
Problemas con zona activa :hover y css

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

Etiquetas: hover, zonas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:03.