Você faz o seu layout com todo cuidado, escreve o html totalmente web standards compliant e faz o CSS bem estruturado. Arruma cada detalhe e confere cada mudança no firefox e internet explorer 7. Pronto. Terminou. Perfeito. Agora só falta testar no internet explorer 6. Nooossa!…. Está tudo errado. Maldito ie6!!!
Acho que todo mundo já passou por isso algum dia e provavelmente ainda vai continuar passando, pois mesmo com ie7, firefox e chrome ainda tem muita gente usando ie6.
Por isso aqui vão algumas dicas para resolver os problemas mais comuns com o velho navegador da Microsoft.
“A minha div está com a margem maior [duplicada]!”
Esse é um dos bugs mais comuns. Quando um elemento usa float:left e tem uma margem esquerda [margin-left] o internet explorer 6, sabe-se lá por quê, duplica o valor desta margem.
Solução:
Basta adicionar um display:inline na div ou em outro elemento que apresente esse problema.
“Tenho uma div com 100% de altura [height:100%] mas não está funcionando.”
Quando você tem uma div com 100% de altura dentro de outro elemento sem altura definida o internet explorer 6 não ‘entende’ e exibe o layout de maneira errada.
Como resolver:
Defina uma altura fixa para o elemento que contém a sua div.
“Minhas imagens PNG estão sem transparência”
É. IE6 não renderiza corretamente PNGs com transparência, o que torna seu uso um pouco arriscado, mas não impossível.
Solução:
Existe um patch quase desconhecido lançado pela Microsoft que corrige este problema, adicione ao seu CSS:
back\ground-color: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”yourPNG.png”, sizingMethod=”crop”);
“O Layout tem duas [3, 4] colunas com float:left mas uma delas sempre “cai” pra baixo da outra ao invés de ficar ao lado”
Isso também é comum, e pode ter dois motivos. Primeiro: se a sua coluna tem margin-left, o internet explorer 6 pode estar duplicando a margem então o espaço restante acaba sendo insuficiente e a sua coluna “cai”. Segundo: mesmo que a sua coluna tenha uma largura definida, se houver qualquer elemento com largura maior dentro dela, o internet explorer 6 irá expandí-la.
Como resolver:
Primeiro, se sua coluna tem margin-left, coloque um display:inline pra ela.
Se o problema não for esse, provavelmente existe algum elemento forçando a largura da coluna. Procure por este elemento e arrume a sua largura. Se você não está encontrando coloque um overflow:hidden na sua coluna.
“Meus itens de lista estão com o marcador desalinhado”
Provavelmente você está usando padding-top no seu <li>.O ie6 não lida muito bem com paddings.
Solução:
Troque o padding-top por margin-top.
E o gran finale:
“O ie6 está duplicando o final da minha última <li>, ou do meu último parágrafo!”
Esse bug é chato. Muito chato. Acontece por que o ie6 sempre “duplica o final do conteúdo do último elemento de uma série elementos com float:left que tenham comentários entre eles”. Acredite ou não, é isso.
Como resolver:
Primeiro, tente retirar todos os comentários entre estes elementos. Se não for possível, coloque float:none nestes elementos e trabalhe com largura, altura e position para posicioná-los corretamente
Espero que ajude.
Veja também : CSS hacks – ie6, ie7, firefox
32 Comentários
Olá pessoal, essas dicas ajudam bastante, mais tive um problema que não conseguir resolver… tou com problema com um site http://www.tribalportoseguro.com.br/site, a barra de menu aparece la em baixo no Internet 6.0, me ajudem por favor ja tentei de tudo.
Oi Paulo, tudo bem?
Dei uma olhada no seu site, o problema é a div #splash que está empurrando todo o menu pra baixo.
Não estudei a fundo o caso, mas vc pode tentar colocar um height:1px e um overflow:hidden pra ela:
#splash { _height:1px; overflow:hidden }
Acho que pode dar certo.
Abraço,
Olá Dom, muito obrigado pela ajuda cara, resolvi o problema, vc me quebrou um galhão cara valeu mesmo um abraço…
ola, estou me matando nesse problema, acredito ser da imagem PNG no IE6
o site é http://www.rosecrepes.com.br
teria alguma idéia ? obrigado !
Oi Thiago,
Dei uma olhada no seu site no IE6. O PNG em si, sua transparência, está funcionando. Mas realmente há problemas com o posicionamento. Não olhei muito atentamente, mas como o layout está bastante desconfigurado o ideal seria você revisar o seu código completamente, HTML e CSS.
Abs
Ola, estou com um probléma com meu site!!!
È que o site ficou perfeito no Navegador INTERNET EXPLORER mais no FIREFOX os textos ficarão maiores e a fonte mudou…
Gostaria de saber porque aconteceu isso, e como posso resolver esse probléma…
Pesso por favor a ajuda!!!
Olá, “Melguibson” (!?))
O seu CSS tem um pequeno problema:
body {
.css {
font-family: Verdana, Arial, Helvetica, sans-serif;
…
}
margin-top: 0px;
…
}
Você precisa fechar o seletor da tag body antes de abrir o da classe CSS:
body {
margin-top: 0px;
…
}
.css {
font-family: Verdana, Arial, Helvetica, sans-serif;
…
}
O IE tolera esse tipo de problema, o FF não.
Abraço
tenho um problema com o ie6 você poderia me ajudar? http://www.eduardodafonte.com.br/homo
Oi esou com um problema, o texto dentro da tabela fica para esquerda sendo que deveria ficar centralizado!
Valeu
“Dom”,
Estou comentando aqui apenas para agradecer.
Estava com o problema da coluna ‘caindo’ e também da duplicação do final do paragrafo.
É realmente inacreditavel que um browser embaralhe tudo por conta de um simples comentario.
De qualquer forma, muito obrigado!
Vou tentar agora resolver o problema do png.
Abraços.
to com probleminha com script as paginas de internet não sai corretas
Vc é um amor (eu te reverenciando). Pq eu estava irritadíssima aqui por não ter resolvido este problema. Mas, agora…
Iupiiiii
Valeu, meu ammigo!
Abraços fortes!
;)
Olá Dom estou com problemas no Navegador tem um site lá que cada vez que eu excluo ele duplica o que faço?
Minha solução: assasinar os usuários de IE6. Simples assim. :D
Obrigado pela ajuda! Se isto resolver meus problemas vou começar agora mesmo.
Caros meu problema esta no menu drop down que no ie6 simplismente não funciona e nas outras versões funciona que é uma beleza.
Por favor se alguem tiver alguma ideia, sou meio novato e quando as coisas não dão certo fico meio perdido.
Obrigado, Enéias
Caros meu problema esta no menu drop down que no ie6 simplismente não funciona e nas outras versões funciona que é uma beleza.
Por favor se alguem tiver alguma ideia, sou meio novato e quando as coisas não dão certo fico meio perdido.
http://aheadlanguage.com.br
Obrigado, Enéias
CSS Exemplo 3
Titulo do Site
Menu
Conteudo
rodape
Toda vez que vou mapear os links em um imagem através do DW fica um espaço em baixo dessa imagem no ie6. Alguém sabe como resolver?
to fazendo o site novo da minha empresa é o sou webdesigner de 1° viagem é meu primeiro site “de verdade” mesmo…
no IE uma maravilha quando abre no mozila puts!!!
que desastre ja tentei colocar os hacks e naum funfa (ja que no começo damateria fala que os hacks pra FF não são confiaveis)
puts naum sei o que faço
alguem pode me dar um help!!!
Estou com um problema em um site que estou desenvolvendo. Estou atualizando um div com innerHTML, e misteriosamente o conteudo das div de cima ficam invisiveis, se você mexe na tela, com a barra de rolagem até tirar a area da tela e voltar, elas voltam a aparecer… Algum idéia porque elas somem?
ola parabens pelo artigo e o site tambem ta muito massa parabens.. Esse IE 6 vou falar viu oHH canseira..
Meu position:abslout não funciona nos ies… preciso que a div fica por cima da outra… só que não dá certo!
o que eu faço?
Solução simples… faça o upgrade!
Nossssaa!!!
vc acabo de salvar a minha vida =D
Eu to montando um template para meu blog e fui testar no IE,
um dos HTML/JavaScript da sidebar fico totalmente fora de posição..
to a uns 3 dias procuradno no Google uma solução. Muito Obrigado!
Já salvei nos Favoritos para retornar.
Um Abraço!
kada uma… que adianta fazer upgrade?!!! vai funcionar só pra ele!!
quem tiver ainda com o ie6 não vai conseguir entrar no blog dele… kada uma…
Olá! Achei seu blog numa pesquisa do Google. Parabéns pelo conteúdo! Meu problema é o seguinte:
Estou desenvolvendo um site que está em http://modernengl.dominiotemporario.com/site/ , como você descreveu, funciona no ie7, 8, google, opera, ff, mas no maldito ie6, meu espaço de conteúdo fica embaixo, como se tivesse uma margem empurrando ele pra lá. Tentei as soluções que você postou, mas infelizmente nada funcionou. Você poderia dar uma olhada no código pra ver onde cometi o erro?
Abs
Olá, estou com um problema onde tenho um menu dropDown, daqueles estilo sanfona, que funciona perfeitamente no IE8 e FF. Recebi uma informação que há clientes que utilizam o IE6, só que para eles as aparecem uma ao lado da outra.
Ex.: . Unidade Operacionais . Cadastro de Usuários
Sendo que deveria aparecer de outra maneira.
Ex.: .Unidade Operacionais
.Cadastro de Usuários.
Estou precisando de sua ajuda, pois já procurei em vários lugares e não consegui achar nada.
Estou mandando uma pequena cópia do código para vc dar uma olhada no HTML e no CSS. Estou desenvolvendo em ASP.NET.
HTML
Unidades
Operacionais
Acesso Webservices
Cadastro do Contratante
Calendário
de Faturamento
Cadastro de Agências
Cadastro de Usuários
Configuração de Menu
CSS
.itensMenu
{
width: 880px;
height:auto;
border: 1px solid #E5E5E5;
border-bottom-color: #E5E5E5;
border-left-color: #E5E5E5;
border-right-color: #E5E5E5;
border-top-color:#E5E5E5;
}
.itensMenu li
{
margin:10px;
}
.itensMenu li a
{
color:Blue;
text-decoration:underline;
}
.itensMenu li a:visited
{
color:Blue;
text-decoration:underline;
}
.itensMenu li a:link
{
color:Blue;
text-decoration:underline;
}
.itensMenu li a:active
{
color:Blue;
text-decoration:underline;
}
.itensMenu li a:hover
{
color:Black;
text-decoration:nome;
}
Parabéns por este conteúdo me ajudou bastante. muito obrigado.
Muito bom esse site, essas dicas sobre os frequentes bugs do IE me ajudou muito. Valew!!!
Dom, seu post é mega útil. Sempre o consulto quando vou ajustar um css para i.6 e sempre funciona!
Abs,
Olá, estou com um problema q é o seguinte, desenvolvi um menu através do flash menu labs para o site (meilehnarquitetura.com.br/teste1) e no site também existirá um animação em flash o problema é o seguinte pelo firefox tudo funciona perfeitamente, mas pelo internet explorer só o menu aparece a animação não aparece e já tentei de tudo por favor me ajude…
Obrigado