Como previnir o bug de dupla margem no IE
Postado por: Pedro Rogério emMuitas pessoas já devem ter passado por esse tipo de problema e nem sabiam o por que de ocorrer isso, mas se repararem, quando você defini uma margem para algum elemento de uma página, e esse elemento tem um float na mesma direção da margem, ela é duplicada. Isso ocorre no IE6, não sei em versões anteriores, mas na versão 7 isso já foi corrigido.
Para vocês verem o que acontece, dêem uma olhada nesse exemplo. Eu defini um float:left para a Div e uma margem esquerda no valor de 200px, no IE6 isso vai para 400px. A maneira de corrigir isso é muito simples, basta definir um display:inline para a Div que tudo volta ao normal, vejam como ficou agora.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Caramba, passei por isso ontem a noite, ae tive que tomar atitudes com posição absoluta e setar medidas para topo e esquerda. Agora ficarei mais esperto, hehehe. Obrigado!!!
show!
=)
post curto mais ótimo!
Me pergunto: porque eu não soube disso antes?
Putz… show de bola uhaeuhaehuaehu
Opa!
Muito bom! :)
Ah Pedro, te convidei para um meme (http://newtoncalegari.com/blog/blogosfera/meme-indique-um-blog), se possível, responde ae.
Abraço, Newton Calegari
Creio q a maioria dos webdesigners que quebram a cabeça com isso, (assim como eu) pensava que o IE dobrava os valores, bom saber qual o erro exato agora, fica mais facil de trabalhar, Muito bom o post. Abração.
Eo jah tenho um cssfix aki que regula todas essas merda do IECA
Vitorgga, disponibiliza para nós para melhorarmos nossas técnicas de anti-ieca kra, valeu, hehe
Show essa dica, sempre passo por isso e fica arrumando por IE, ow VITORGGA que cssfix é esse que corrige automaticamente os bugs do IE, se puder manda pro blog.. vlw! ;)
Apesar do IE7 ter corrigidos alguns dos problemas de renderização do .css, ele ainda apresentar muitos bugs, oque nos faz perder um pouco a paciência.
Pra contornar isso eu uso só o left, com position: relative; = )
Também queria saber como resolver este problema no IE.
Então VITOR você pode dizer pra gente como funciona o cssfix que você falou?
IE realmente da muita dor de cabeça.
Ótimo post! Muito útil…acabei de resolver esse problema através deste post!
No caso o ie6 tbm dobra os valores de margem superiores e inferiores com o float, como resolver isto?
Muito interessante!
Este artigo veio na hora certa. eu o li hoje na parte da manhã, e por sorte ou azar me deparei com este bug.
Maravilha resolveu na hora.
Obrigado!
Muito obrigado pela dica!
Funcionou perfeitamente!
Parabéns!
mto brigado pela dica!
tava me matando p/ acertar uma tela que já era p/ ter entregue mas tava exatamente com esse bug.
valeu!!
MARAVILHA, ÓTIMO!!! :))
Pq eu não soube disso antes? hehe
Perfeito!
É, o lance do float é o melhor, o outro é não usar width nos div, somente quando for necessário mesmo, e se preciso, usar outro div dentro, e nesse segundo div dar o padding que você quer dar, deixando o div que tem o width apenas com o style width, separando o div do width e o div do padding. Complicado mas funcional. Isso tbm é pra quem usa iecas véios, nem é mais necessário preocupar com essas coisas. 2007-2010…