Efeito não aparece no Firefox

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Efeito não aparece no Firefox

Mensagem por KognuZ 22.12.14 0:58

Detalhes da dúvida


Versão do fórum : phpBB2
Nível de acesso : Fundador
Navegador usado : Mozilla Firefox
Imagem :
Imagem da minha dúvida:

Membros afetados : Todos os membros do fórum
Endereço do fórum : http://royal.forumclan.com

Descrição do problema

Na página principal, alguns efeitos quando colocado o mouse em cima, não são aplicados ao firefox. Como mostrado na imagem, do lado esquerdo está com efeito, e ao lado direito está com uma cor sólida. Podem verificar onde está o erro no código abaixo?
Código:
.slidingMenu li.move {
   width: 9px;
   height: 68px;
   right:0px;
   padding-right:10px;
   margin-top:-5px;
   z-index: 8;
   position: absolute;    
   background: #565656;    
   background:
      -webkit-gradient(
         linear,
         left top,
         left bottom,
         from(#565656),
         to(#1e1e2a)
      );    
   background:
      -moz-linear-gradient(
         top,
         #565656,
         #565656
      );    
   -moz-border-radius: 8px 0px 0px 8px;  
   -webkit-border-top-left-radius: 8px;        
   -webkit-border-bottom-left-radius: 8px;
   border-top-left-radius: 8px;  
   border-bottom-left-radius: 8px;        
   -moz-box-shadow:1px 1px 5px #000;
   -webkit-box-shadow:1px 1px 5px #000;
   box-shadow:1px 1px 5px #000;   
   }
.slidingMenu li a {
   text-shadow:0px 5px 9px #000000;
   font-size:66px;
   text-transform:uppercase;
   text-decoration: none;
   color: #ddd;
   outline: none;
   text-indent:5px;
   z-index: 10;
   display: block;
   float: right;
   height: 66px;
   line-height: 66px;
   position: relative;
   overflow: hidden;
   padding-right:10px;
}
/* Descriptions */
.slidingMenuDesc{
   margin-top:35px;
   position:relative;
}
.slidingMenuDesc div{
   background: #565656;    
   background:
      -webkit-gradient(
         linear,
         left top,
         left bottom,
         from(#565656),
         to(#1e1a2a)
      );    
   background:
      -moz-linear-gradient(
         top,
         #565656,
         #1e1e2a
      );      
   height: 68px;
   padding-right:5px;
   left:-5px;
   width:0px;
   margin-top:0px;
   overflow:hidden;
   position:absolute;
   -moz-box-shadow:1px 1px 5px #000;
   -webkit-box-shadow:1px 1px 5px #000;
   box-shadow:1px 1px 5px #000;
   -moz-border-radius: 0px 8px 8px 0px;  
   -webkit-border-top-right-radius: 8px;        
   -webkit-border-bottom-right-radius: 8px;
   border-top-right-radius: 8px;  
   border-bottom-right-radius: 8px;
}
.slidingMenuDesc div span {
   font-size:36px;
   color: #f0f0f0;
   text-indent:5px;
   z-index: 10;
   display: block;
   height: 66px;
   line-height: 66px;
   position:absolute;
   right:10px;
   margin-left:5px;
   top:20px;
}


Última edição por KognuZ em 23.12.14 8:11, editado 1 vez(es)
KognuZ

KognuZ
Novo Membro

Membro desde : 10/01/2013
Mensagens : 22
Pontos : 38

http://tursoprojeto.forumclan.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito não aparece no Firefox

Mensagem por Lima 3005 22.12.14 10:03

Tem que modificar isto:

Código:
.slidingMenu li.move {
background:
      -moz-linear-gradient(
         top,
         #565656,
         #565656
      );    

Por isto:

Código:
background: -moz-linear-gradient(center top , #565656, #1E1E2A) repeat scroll 0% 0% transparent;

Ficando deste modo:

Código:
.slidingMenu li.move {
   width: 9px;
   height: 68px;
   right:0px;
   padding-right:10px;
   margin-top:-5px;
   z-index: 8;
   position: absolute;    
   background: #565656;    
   background:
      -webkit-gradient(
         linear,
         left top,
         left bottom,
         from(#565656),
         to(#1e1e2a)
      );    
 background: -moz-linear-gradient(center top , #565656, #1E1E2A) repeat scroll 0% 0% transparent;
   -moz-border-radius: 8px 0px 0px 8px;  
   -webkit-border-top-left-radius: 8px;        
   -webkit-border-bottom-left-radius: 8px;
   border-top-left-radius: 8px;  
   border-bottom-left-radius: 8px;        
   -moz-box-shadow:1px 1px 5px #000;
   -webkit-box-shadow:1px 1px 5px #000;
   box-shadow:1px 1px 5px #000;  
   }

Ficando assim:

http://prntscr.com/5jmop6
Lima 3005

Lima 3005
Membro

Membro desde : 08/02/2013
Mensagens : 631
Pontos : 885

http://universogamer.foruns.com.pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito não aparece no Firefox

Mensagem por KognuZ 23.12.14 8:11

Lima 3005 escreveu:Tem que modificar isto:
Ficando assim:
http://prntscr.com/5jmop6

Resolvido! Muito obrigado.
Resultado: http://puu.sh/dGaxV/3af85827ba.jpg
KognuZ

KognuZ
Novo Membro

Membro desde : 10/01/2013
Mensagens : 22
Pontos : 38

http://tursoprojeto.forumclan.com/forum

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Efeito não aparece no Firefox

Mensagem por Sennior 23.12.14 17:02

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Sennior

Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos