Não alinho Cabeçalho no Safari

[Duilio Gomes Pereira 0]

Olá Colegas!

 

Estou neste momento terminando de fazer este site:http://geraldohenrique.com/

Não estou conseguindo alinhar a imagem desta primeira página com o cabeçalho no Safari. Nos outros navegadores esta funcionando normalmente, ele não desalinha, já no Safari acho que é coisa e 1px a mais. Tem como resolver isso?

 

Obrigado!

[bruno_mosciatti 22]

Faça um hack para o Safari, um CSS específico para esse navegador com os códigos que precisa.

 

 

OBS: Passeando rapidamente pelo site, notei um probleminha ao rolar a página até o final... O vídeo está ficando por cima da barra do menu, talvez um position:relative e um z-index resolva. (Vi no IE8 isso, no Firefox está ok)

[Duilio Gomes Pereira 0]

Não consigo achar uma linha de hack para solucionar isso. Não conseguindo, mas to procurando.

[bruno_mosciatti 22]

Não consigo achar uma linha de hack para solucionar isso. Não conseguindo, mas to procurando.

 

Você pode tentar usar hack de webkit mas pode prejudicar o desempenho no Chrome.

 

É um caso muito específico você arrumar um problema para Safari com alinhamento, conforme você disse, de 1px.

Ao meu ver, não há tanta necessidade de se preocupar com este navegador, visto que está longe de ser um dos mais utilizados e ainda mais por se tratar de um problema tão pequeno e imperceptível.

[Duilio Gomes Pereira 0]

O Problema Brunão é que esse cliente começou uma carreira internacional, portanto, lá fora a turma usa muito MAC, inclusive o proprio cliente é um usuário de MAC e navega com o Safari. Mas Valeu man!

[bruno_mosciatti 22]

O Problema Brunão é que esse cliente começou uma carreira internacional, portanto, lá fora a turma usa muito MAC, inclusive o proprio cliente é um usuário de MAC e navega com o Safari. Mas Valeu man!

 

Ah sim, então agora temos um caso específico mesmo.

 

Tente usar isso

/*\*/
div.classe {background-color: red; }
/**/

Lembrando que div.classe é o elemento que você quer mexer com sua classe e ali onde está background-color: red você coloca o código que quiser, ok?

Espero que resolva!

[Duilio Gomes Pereira 0]

Bruno, no meu caso eu acredito que este é o código que tem que mexer, como eu faço pra colocar essa solução?

 

 

div.main-menu nav
{
	
    max-width: 900px;	    
    padding: 0px 30px;
    height: 76px;
    border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;}

[bruno_mosciatti 22]

 

Bruno, no meu caso eu acredito que este é o código que tem que mexer, como eu faço pra colocar essa solução?

 

 

div.main-menu nav
{
	
    max-width: 900px;	    
    padding: 0px 30px;
    height: 76px;
    border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;}

 

Conforme falei, você deve fazer da seguinte maneira :

 

    /*\*/
    div.main-menu nav { max-width: 900px; padding: 0px 30px; height: 76px; border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px;}
    /**/

[Diogo Rodrigues_79134 4]

Hack para o webkit (Chrome e Safari):

 

@media screen and (-webkit-min-device-pixel-ratio:0) {

div.main-menu nav{

margin-top: -1px;

}

}

Veja se resolve.

Lembrando que como essa regra irá substituir a anterior, portanto ela precisa ser declarada depois.