Estou a trabalhar num site, o problema é quando a janela tem menos de 500px, no Firefox a navbar (navBar.css) aparece de uma maneira (correta) e no Chrome aparece de outra. Como resolver isso?
2 Respostas
Mude essa linha:
#missValMob, #namesJobsMob, #middleTextMob {
display: inline-block; /* estava display: block; */
}
Isso deve ter acontecido uma vez que os dois navegadores apresentam diferenças na renderização, que, ainda que mínimas, geram alguns problemas.
-
Ou ainda algum atributo foi reconhecido pelo Chrome mudando a apresentação do
display
causando o problema. Tal atributo não foi reconhecido pelo Firefox. Não olhei o resto do código, busquei somente a falha, não posso confirmar. Commented 11/03/2014 às 11:37 -
1Muito obrgado, resultou... Já pesquisei mas não comprrendi muito bem a diferença entre "block" e "inline-block", Achas que consegues explicar como se estivesses a falar com uma criança sff?– MiguelCommented 11/03/2014 às 11:41
-
ELI5? OK, vou editar a resposta dando a explicação da diferença entre ambas, mas não sei se ela aplica ao caso. Deu certo mas foi por experiências anteriores, um chute. Commented 11/03/2014 às 11:43
-
Enquanto vou editando a resposta: seu site tem alguns elementos com
id
igual, recomendo arrumar isso. Esse atributo deve ser único por página. Commented 11/03/2014 às 11:47 -
Creio que tem id's iguais para os elementos com a mesma formatação– MiguelCommented 11/03/2014 às 11:51
Aplique essas regras no seu css, acredito que ira funcionar conforme pretendido:
@media only screen and (max-width: 800px)
#upBar {
top: 0;
}
#wrapper > header {
position: fixed;
top: 0;
z-index: 9;
}
-
Não resultou, está na mesma... no chrome a navbar parece estar dependente da div "3 gerações...", não percebo porquê– MiguelCommented 11/03/2014 às 11:34