Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/SWFyWHn.png&key=0817fa80e624c107b3946d407dad700ff73793b012931eeee1d919970e821e00" alt="SWFyWHn.png" />
/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/yZwElgj.png&key=78f0c87b5623ffcb453d950920896ba645be4c515a2b4d12d56b0b0cf2aa7352" alt="yZwElgj.png" />
Ja no firefox, no menu e nesta mesma área, acontece isso:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/xRyDPka.png&key=781828162a218c4f45de4db8369d9f9f022a91574df3d1ca5faa2dc2d89bb956" alt="xRyDPka.png" />
/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/wKyCTc3.png&key=5b319b4f636f40149bf14295f59a43faf6e52f169bdc0f8286e6c96c4ea051d3" alt="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;
} 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;
} display: inline;
padding-right: 26px;
padding-left: 29px;
} border-bottom: 5px solid #762d2f;
padding-bottom: 21px;
-webkit-transition: border-bottom 0.2s;
-moz-transition: border-bottom 0.2s;
} border-bottom: 5px solid #c0a035;
padding-bottom: 21px;
-webkit-transition: border-bottom 0.2s;
-moz-transition: border-bottom 0.2s;
} border-bottom: 5px solid #579840;
padding-bottom: 21px;
-webkit-transition: border-bottom 0.2s;
-moz-transition: border-bottom 0.2s;
} border-bottom: 5px solid white;
padding-bottom: 21px;
-webkit-transition: border-bottom 0.2s;
-moz-transition: border-bottom 0.2s;
} 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
>
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
Natan,
Fico feliz em ter ajudado. Esses erros são bem comuns e podem acontecer por diversos fatores:
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!
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.
Abraços!