CSS hacks para Firefox 3 -
Acreditamos que a maioria dos desenvolvedores web, gostam muito do querido navegador Firefox!
E então veio sua nova versão que em sua primeira semana possuia 9 mil downloads por minuto. Ualll
Contudo, muitos desenvolvedores foram pegos por algumas diferenças entre a versão 2 e 3 do navegador (isso inclui a Google, muitos de vocês e nós, School of Net).
Em nosso site do pré-lançamento, nosso menu horizontal estava funcionando perfeitamente no Firefox 3 (FF3), porém no Firefox 2 (FF2) tínhamos uma diferença de 1px no atributo padding-top.
Abaixo seguem algumas hacks para conseguirmos ajustar nossas aplicações entre as duas versões do browser:
#qualquerelemento, x:-moz-any-link, x:default {}
Em nosso caso (site de pré-lançamento):
#menu ul li a,x:default { padding:6px 16px 10px 16px;} /* Somente funciona no FireFox 3 */
Outras hacks (citadas em http://diegofranco.net/archives/css-hacks-para-o-firefox-3):
/* Hack for Firefox 3 */
.nomedasuadiv, x:default { atributos }
/* Hack for Firefox 2 */
.nomedasuadiv, x:-moz-any-link { atributos }
/* Hack for Internet Explorer 7 */
.nomedoseuelemento { *display:none; }
/* Hack for Internet Explorer 6 */
.nomedoseuelemento { _display:none; }
/* Hack for Opera */
@media all and (min-width: 0px){
.content { }
}
Segue um forum muito bom sobre esses pontos!
http://forums.mozillazine.org/viewforum.php?f=25
Qualquer dúvida, sugestão ou experiência, não hesite em comentar esse post!
Olá!
Cheguei aqui por acaso, procurando por css hack para IE e Firefox 3.
Tive um problema parecido com esse, mas o meu problema vcs ainda tem atualmente.
Testem o menu no IE 6.
A área útil dele vai ser somente a parte escrita do menu, já fo FF ocupa o quadrado inteiro. Isso pq o IE só aceita a área toda, se estiver declarado um width no a.
Resolvi com um hack para o IE, declarando um tamanho:
.menu a { *width:56px; }
E outro para o FF, compensando com padding:
.menu a, x:-moz-any-link { padding: 5px 8px; }
Um detalhe, x:default tb foi reconhecido pelo IE 6!
Aí usei o x:-moz-any-link e deu certo.
Abraço!
Giovani
Comentário by Giovani — 24/07/2008 @ 23:49
Caro Giovani,
Primeiramente, obrigado pela colaboração.
Em relação ao: .menu a { *width:56px; } você teria que setar um tamanho fixo para cada item?
Em relação ao x:default, verificamos isso para diferenciar entre ff2 e ff3 e tb adotamos o x:-moz-any-link.
Abraços
E contamos com suas visitas e contribuições.
Comentário by Wesley — 25/07/2008 @ 0:00
Olá!
Isso, no seu caso, no
#navigation ul li a
teria que setar um *width mínimo para o IE reconhecer a área toda.
Pra mim foi realmente necessário pq havia um submenu com onMouseOver na barra principal.
Estive dando uma olhada no conteúdo do site, e gostei bastante!
Parabéns!
abraço..
Comentário by Giovani — 25/07/2008 @ 3:10
Obrigado Giovani,
De qualquer forma, quando esse mínimo for totalmente dinâmico não pode não funcionar em alguns casos.
De qualquer forma, faremos um novo post sobre hacks, FFs e IEs e com certeza levaremos seus pontos em consideração, faremos algo mais prático…
Até mais.
Comentário by Wesley — 25/07/2008 @ 11:04
Gostaria de deixar aqui uma breve reclamação dobre a nova versão do FF. Está muito lindo e coisa e tal, mas acho que eles cairam no mesmo erro do IE, colocar versõa com diverenças absurdas entre compilação de css! Agora, queridos programadores, desenvolvedores, e cis ltda vamos ter mais um browser para se preocupar!!! mais hack para fazer, if, /**/ em nosso css,….
boa sorte a todos!!!
Comentário by Arthur — 28/08/2008 @ 12:46
estou com um problema
padding-top
nao pega de jeito nenhum no firefox 3 e no ie pega normalmente
padding-top 15px
como resolver?
Comentário by kaue — 15/09/2008 @ 16:15
Poderia dar um exemplo. O padding funciona sim. Como você está utilizando.
Faça um um test-drive de 3 dias em nosso ecampus, que há diversos elementos como padding sendo exemplificados na prática.
Comentário by Wesley — 16/09/2008 @ 1:19
opa..foi mal..realmente nao expliquei direito oq eu queria e ate me enganei…
seguinte..to usando o novo fire..e ie7
o margin-top nao funciona no fire..so no i7
ja usei hacks e nada..saca so:
CSS:
#teste {
background-color: #00FF66;
height: 500px;
width: 500px;
}
#normal, x:default {
background-color: #00CCCC;
height: 300px;
width: 200px;
margin-top: 15px !important;
}
HTML:
body
div id=”teste”
div id=”normal” ergrhgeherh /div
/div
/body
aqui no meu nao da margin top de jeito nenhum..ja tentei todos os hacks possiveis e nada..acontece isso no de vcs?
Comentário by kaue — 17/09/2008 @ 15:47
Não temos problemas com margin-top com FF e IE…
Tem como colocar na web isso?
Comentário by Wesley — 23/09/2008 @ 17:40
Galera p/ funcionar nos 3 browser’s coloca assim:
margin-top:0px; /* Firefox */
*margin-top:40px!important; /* IE7 */
-margin-top:100px; /* IE6 */
Comentário by Gilberto — 23/10/2008 @ 17:42
Wesley,
Muito obrigado pela colaboracao, e dalhe mais hacks nos css, hauhauhau, fazer o q neh…
Valewwww
Comentário by Marcus — 27/10/2008 @ 21:34
Duca.
Rolou show o lance do margin-top.
[]s
Brunao
Comentário by Bruno — 29/10/2008 @ 20:03
Olá,
Preciso de ajuda no site que estou colocando no ar. Ele fica perfeito no safari, mas no Firefox fica pequeno.
http://www.artece.com.br
Agradeço desde já~
Comentário by Carol — 07/10/2009 @ 14:24