Ir para conteúdo
Entre para seguir isso  
natant1

padding chrome vs firefox

Recommended Posts

estava trabalhando no meu projeto e decidi verificar como ele estava ficando em diferentes navegadores até que me deparei com isso:

 

No chrome, em meu menu e em outra area do site, onde está sendo aplicada a propriedade padding, o resultado é o desejado:

 

SWFyWHn.png

yZwElgj.png

 

Ja no firefox, no menu e nesta mesma área, acontece isso:

 

xRyDPka.png

wKyCTc3.png

 

 

Alguém tem alguma solução para este problema? Como é possível diferenciar o padding pro chrome e pro firefox?. Não é de meu conhecimento um -moz- para padding :(

 

aqui esta o codigo do meu menu:

 

CSS:

* {
    margin: 0px;
    padding: 0px;
}
header{
    position: relative;
    height: 79px;
    width: 100%;
    background-color: #053d74;
}

ul#menuprinc {
    position: absolute;
    font-size: 1.38em;
    top: 29px;
    width: 578px;
    right: 100px;
}

ul#menuprinc a {
    text-decoration: none;
    color: white;
    font-family: Agency FB;
}
ul#menuprinc li {
    display: inline;
    padding-right: 26px;
    padding-left: 29px;
}
ul#menuprinc li.lancamentos {
    border-bottom: 5px solid #762d2f;
    padding-bottom: 21px;
    -webkit-transition: border-bottom 0.2s;
    -moz-transition: border-bottom 0.2s;

}
ul#menuprinc li.topYoutube {
    border-bottom: 5px solid #c0a035;
    padding-bottom: 21px;
    -webkit-transition: border-bottom 0.2s;
    -moz-transition: border-bottom 0.2s;
}
ul#menuprinc li.maisAssistidos {
    border-bottom: 5px solid #579840;
    padding-bottom: 21px;
    -webkit-transition: border-bottom 0.2s;
    -moz-transition: border-bottom 0.2s;
}
ul#menuprinc li.comoFunciona {
    border-bottom: 5px solid white;
    padding-bottom: 21px;
    -webkit-transition: border-bottom 0.2s;
    -moz-transition: border-bottom 0.2s;
}
ul#menuprinc li.lancamentos:hover, header ul#menuprinc li.topYoutube:hover, header ul#menuprinc li.maisAssistidos:hover, header ul#menuprinc li.comoFunciona:hover {
    border-bottom: 5px solid #053d74;
}

 

HTML:

<header>
       <nav>
            <ul id="menuprinc">
                 <a href="#"><li class="lancamentos">Lançamentos</li></a><a href="#"><li class="topYoutube">Top Youtube</li></a><a href="#"><li class="maisAssistidos">Artistas</li></a><a href="#"><li class="comoFunciona">Como Funciona</li></a>
            </ul>
        </nav>
        </header>

https://jsfiddle.net/natant1/gtd9m051/2/

 

Obrigado

Compartilhar este post


Link para o post
Compartilhar em outros sites

Natan,

Essa forma que eu vou te explicar não é errada, mas também não é tão comum, já que o CSS3 & Level 4 conseguem lidar bem em todos os navegadores recentes.

Com o CSS você pode aplicar um estilo somente ao mozilla:

@-moz-document url-prefix() {
   .menu { padding: 0px; }
}

O @-moz-document significa que só os browsers Mozilla vão conseguir interpreta-lo. Os demais passarão despercebidos por essa propriedade.

Se isso não funcionar, tente alterar seus paddings-top, padding-bottom... Por somente Padding.

padding: 10px   0px   10px   0px;
         Cima   Dir.  Baixo  Esq.

Abraços!

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Natan,

 

Essa forma que eu vou te explicar não é errada, mas também não é tão comum, já que o CSS3 & Level 4 conseguem lidar bem em todos os navegadores recentes.

 

Com o CSS você pode aplicar um estilo somente ao mozilla:

@-moz-document url-prefix() {
   .menu { padding: 0px; }
}

O @-moz-document significa que só os browsers Mozilla vão conseguir interpreta-lo. Os demais passarão despercebidos por essa propriedade.

 

Se isso não funcionar, tente alterar seus paddings-top, padding-bottom... Por somente Padding.

padding: 10px   0px   10px   0px;
         Cima   Dir.  Baixo  Esq.

Abraços!

 

Oi Henrique,

 

Muito obrigado pela sua resposta, o "-moz-document url-prefix" foi o q melhor solucionou meu problema. Reduzir tudo a apenas Padding não resolveu. você saberia me informar o por quê disso estar acontecendo já que o CSS3 & Level 4 conseguem lidar bem em todos os navegadores atuais? Abraços

Compartilhar este post


Link para o post
Compartilhar em outros sites

Natan,

Fico feliz em ter ajudado. Esses erros são bem comuns e podem acontecer por diversos fatores:

  • Erro de estruturação do HTML.
  • Erro de estruturação do CSS.
  • Algumas classes em conflito no CSS.
  • Algumas funções em JS alterando o que não devem.
  • Falta de conhecimento ao estruturar o CSS.
  • Entender a diferença entre -webkit-, -moz-, -ms-, -o-...

Muitas dos erros como esse que aparecem por aqui são por falta de conhecimento, mas muito outros são por bugs que talvez ao estruturar tudo tenha passado despercebido.

 

Sempre que for criar um site, estruture-o todo em HTML primeiro e depois trabalhe em cima do CSS - principalmente se estiver utilizando algum framework como Bootstrap, Foundation, Skeleton, Materialize...

 

Aconselho a leitura de alguns artigos sobre Cross-Browsing:

Sem contar uma ferramenta que acho excelente:

Demais dúvidas estarei a disposição.

Abraços!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Entre para seguir isso  

  • Conteúdo Similar

    • Por Pablo Macedo
      Eae, sou "novato", já tinha estudado html, mas parei por muito tempo e to voltando, mas ao fazer o primeiro site, tive problema nas imagens - banner e logo - elas não aparecem nos sites, segue anexo



       
    • Por paikoala
      bom dia galera, tenho um site que montei e hospedei ele no 000WEBHOST. enquanto estava montando ele em localhost funcionava tudo certo tanto no crhome quanto no firefox mas quando subi ele pra hospedagem no firefox ele começou a zuar. Pq o site abre normal no chrome e no firefox ele fica assim:
       


    • Por Victordiniz
      Bom dia a todos, confesso que não sei quase nada de html mais estou tentando, quem poder me ajudar fico muito agradecido.
      Bom estou criando um efeito html que é composto por 3 imagens que ao passar o mouse a imagem 1 é substituída por a 2 e ao tirar o mouse pela imagem 3.
      Porém a imagem 2 irá ser no formato WebP  e com isso estou tendo problemas no navegador Firefox que não suporta o formato.
      A unica alternativa seria dentro do efeito chamar uma imagem Jpg pra substituír a Webp quando o navegador não suportar. E ai que está o problema não estou conseguindo chamar essa imagem. Desde já muito obrigado. 
       
      Esse é o HTML:
       
      <a href="ENDEREÇO-DO-LINK"><img src="ENDEREÇO-DA-IMAGEM-1" border="0" onmouseover="this.src='ENDEREÇO-DA-IMAGEM-2'" onmouseout="this.src='ENDEREÇO-DA-IMAGEM-1'"></a>
    • Por argl
      Ola,
      Notei que há algum tipo de malware ou similar em meu PC que usa o Outlook ou browsers pra envio de e-mail sem minha permissão.
      Passei a receber diversos e-mails de retorno de mensagem negada por servidores. Por outro lado meu provedor chega a bloquear o SMTP para mim por excesso de mensagens enviadas.
      Notei que ao desinstala o Chrome ou o Firefox (testei com os dois) reduz consideravelmente. Atualmente estou com os dois. Porém preciso do Firefox para acessar certas páginas do governo formatadas para Firefox. Atualmente tenho o Kaspesky Total Security instalado. 
       
      Seguem logs:
       
      https://www.cjoint.com/c/HGDx10wjIaJ
      https://www.cjoint.com/c/HGDx2D21ijJ
       
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.