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!
Loading ...
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
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.
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..
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.
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!!!
estou com um problema
padding-top
nao pega de jeito nenhum no firefox 3 e no ie pega normalmente
padding-top 15px
como resolver?
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.
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?
Não temos problemas com margin-top com FF e IE…
Tem como colocar na web isso?
Galera p/ funcionar nos 3 browser’s coloca assim:
margin-top:0px; /* Firefox */
*margin-top:40px!important; /* IE7 */
-margin-top:100px; /* IE6 */
Wesley,
Muito obrigado pela colaboracao, e dalhe mais hacks nos css, hauhauhau, fazer o q neh…
Valewwww
Duca.
Rolou show o lance do margin-top.
[]s
Brunao