Solução De Bugs

Tópico criado para discutirmos soluções para bugs.

Antes de Postar:
1 - Verifique se o bug já não esta listado.
2 - Leia esse post inteiro.

Como funciona?
1 - post o bug com a maior de riqueza de detalhes possível.
2 - os membros do fórum irão discutir sobre o problema.
3 - quando uma solução for encontrada, mandem mp para o moderador.
4 - o moderador ira incluir um link(com uma breve descrição do bug) para um post explicando a solução.

Observações:
O tópico se restringe a discussão do tema da sala, mas serão aceitas soluções que incluam outras linguagens, como javascript, activex e afins...

Bugs resolvidos:
1-Espaçamento incorreto no ie6 quando se tenta alinhar um background separado feito com duas divs.
2-Double float, margens dobradas no ie6 em elementos com float
3- boxModelHack, problemas width-padding-border, modelo não standard do ie6
4- margin-bottom não funciona no ie7, float in float

Edição feita por: Édipo Costa Rebouças, 17/04/2009, 13:02.

Existe um bug no ie6 quando por exemplo:

Ex:

<div id="tudo">
<div id="topoall">
<div id="topo"></div> <!-- fim div topo -->
</div><!-- fim div topoall -->
</div> <!--  fim div tudo -->

e voce cortar a imagem do topo em dois pedaços e fazer com que as duas se encaixem, no IE6 da uma separação nas imagens, ou seja elas não se aproximam totalmente.

Já como Background PRO IE6 a solução é usar um display: block;

Sendo imagem nunca vi nenhum hack pelo forum aqui!

Abraços!

heheheh

Edição feita por: Édipo Costa Rebouças, 17/04/2009, 13:18.

augusto você pode dar um exemplo, pois eu faço desenvolvo layout com precisão de pixel em css nunca vi o bug relatado no ie6.

Veja ae!

em cima temos uma div, embaixo outra div aonde une o menu, com a logo e os botões em flash!

no IE6 a uma 'margin' entre essas duas divs..

o problema até da para resolver com gambiarras mas fica uma coisa feia, preferi deixar assim.

Sendo que para funcionar no IE6 desta forma q fiz, se fosse usado como BG basta por um display: block; já como imagem/flash não da. Claro que existem outras formas de se fazer para ficar correto, por uma div sem separar a logo do menu e etc.. Porém fiz para tentar solucionar o erro com as propias propiedades do CSS. mass... hehehe. este caso é um exemplo.

Edição feita por: Augusto Saggese, 09/12/2008, 09:13.

vou escrever sobre o double flloat do ie6.
este bug dobra a margem de um elemento float.

ele ocorre quando temos essa estrutura no html:

<div id="master">
   <div class="cols"> <!-- coluna 1--></div>
   <div class="cols"> <!-- coluna2 --></div>
</div>

sendo que e +- o seguinte css:

.cols{
  float: left;
  margin: 0 20px;
 }

o bug acontece com o primeiro div.cols que escosta sua margem na outra div que a contem(#master) e se a margem do segundo div tocar a outra extremidade do master, ela é dobrada tb.

uma solução para isso, somente quando se trabalha com div e elementos que são "nivel de bloco" por padrão, é declarar display: inline; para os divs das extremidades.

mas se você esta trabalhando com uma tag a( poderia ser qualquer outra tag inline), por exemplo, e precisa de que ela seja bloco, bem sua solução é ver alguma outra forma de definir o espaçamento entre essas entre a primeira e ultima tag em relação ao container.
pode ser com width, padding, qualquer outra coisa.

Edição feita por: Édipo Costa Rebouças, 11/12/2008, 12:05.

É foi como falei, melhor é declarar outro tipo de espaçamento e posicionamento das divs..

abraços !

uma solução para isso, somente quando se trabalha com div e elementos que são "nivel de bloco" por padrão, é declarar display: inline; para os divs das extremidades.

mas se você esta trabalhando com uma tag a( poderia ser qualquer outra tag inline), por exemplo, e precisa de que ela seja bloco, bem sua solução é ver alguma outra forma de definir o espaçamento entre essas entre a primeira e ultima tag em relação ao container.

Gostou da dica né...

No caso de Divs que são blocos, o display: inline ajuda muito. Claro que é possível contornar o bug de outras formas, porém demora um pouco mais, o display: inline é direto e corta o mal pela raíz.

a que gostei ,mais que você me passou foi o pngfix com o behavior, quase perfeito.

Gostaria de saber como resolver alguns "bugs" ou se pode chamar de bug sei la ^^'

1º Criei um Drop Menu, onde somente no IE6 quando mostra o menu não fica acima dos objetos SELECT do HTML =/
como posso resolver isso?

2º ao utilizar o margin-top separando um pouco os links do menu, ao passa o mouse em cima do menu, os links aparecem normalmente (até ai correto) porém, quando eu vou colocar o mouse em cima dos links, ele some. tenho que movimentar o mouse o mais rápido que puder colocando em cima dos links para não sumir. Como resolver isso?

obrigado,
ps: se não for o local para adicionar esta dúvida me perdoem. estarei criando um novo post com este problema.

Edição feita por: Goku Jr, 12/01/2009, 10:27.

bem goku, precisamos de códigos

Primeiro, obrigado por iniciar a me ajuda Édipo

1º Drop Down Menu no IE6 não funciona corretamente:

Estarei exibindo somente o código em CSS que montei com ajuda de alguns sites+tutoriais

#nav, #nav ul  {
  padding: 0;
  margin: 0;
  list-style: none;
  line-height: 1.3;
 }

 #nav a {
  color: #000000;
  display: block;
  text-decoration: none;
 }

 #nav li {
  float:left;
 }

 #nav li ul {
  margin: 5;
  margin-left: -12.41em;
  position: absolute;
  background: #BBBBFF;
  width: 40em;
  left: -999em;
  border-bottom: 1px solid #1C71D9;
  border-left: 1px solid #1C71D9;
 }

 #nav li:hover ul, #nav li.sfhover ul {
  left: auto;
 }

Como falado anteriormente o menu ao ser EXIBIDO fica por de trás do código html SELECT! pelo que andei lendo na net o IE6 não trabalha corretamente com z-index (acho que é isso).

2º com este mesmo código exibido acima, quando eu adiciona a linha margin-top: x; tenho que movimentar rapidamente o cursor do mouse pra dentro do drop down menu para não fechar.

Como posso resolver estes 2 pequenos problemas?

Edição feita por: Goku Jr, 13/01/2009, 12:01.

bem galera tem um bug no ie6 que eu preciso da solução para aplicar em um projeto.

eu tenho

[codebox]
<div>
<a>... </a>
<a>... </a>
<a>... </a>
</div>
[/codebox]

sendo que dois desses links são float's e um esta com position absolute.
o que esta com absolute some da tela.

se alguem souber a solução fico agradecido.

Edição feita por: Édipo Costa Rebouças, 23/01/2009, 09:28.

Édipo,

Você está jogando esse link com absolute para uma área fora da div? Deve ter algum elemento sobrepondo esse link, seja qual for esse elemento, retire o background dele para ver se é isso mesmo.

Tem como você criar uma página simples (sem imagens) só para mostrar esse bug e postar o código? Já aconteceu comigo, mas não consigo fazer o bug reaparecer para mim.

bem galera eu não consegui reproduzir o bug, mas já aconteceu outras vezes tb, esta ai ... é uma lista que esta embaixo do logo que sumiu no ie6.

Editado
Bem galera consegui resolver tirando a largura do elemento pai.
pelo que li umas das causas do bug e quando os floats dentro do pai alcançam 100% do seu tamanho original, no meu caso , o pai é absoluto tb.

Edição feita por: Édipo Costa Rebouças, 18/02/2009, 16:46.

galera, alquem sabe me dizer se tem uma solução para eliminar um bug no ie7, quando eu tenho um float dentro de outro float,
uso margin-bottom e não funciona?
1 - queria saber uma solução sem o auxilo de outra tag e que faça a margem funcionar.
2 - não quero aquela que coloca o padding no elemento pai