Postado por Micox - Náiron J. C. G..

05 Junho, 2007

Opa, dica rápida.

Edit 27/08/07 - Atenção: leia o post até o final onde está a solução do Chessman pois ela é a mais aconselhável.

Às vezes quando agente tá brincando com algum elemento ou pai de elemento que tem float: left ou display: table acontecem alguns bugs estranhos.

No Firefox, às vezes, o float não funciona quando se dá Control + F5, porém fica tudo beleza se você der um F5.
No Internet Explorer o pai do elemento simlesmente some. Vai entender.

Eu acredito que estas loucuras sejam bugs.

Aqui um exemplo de um cidadão com o problema.

Algumas soluções pra estas loucuras incluem um elemento fantasma (ou wrapper) no final da div pai com um clear both.
Outras sugerem colocar um display inline em quem tá com o float.

Eu vou entrar pro rol das soluções possíveis e tentar mostrar mais outra:

Tenta definir a largura e altura do elemento pai dos elementos com float.
Pode ser em porcentagem mesmo. Apenas defina. Se não der certo no pai dos floats, tente no avô dos floats também.

Aqui pra mim deu certo. Talvêz pra você dê certo também.

Edit: Uma perfecta (e inédita acredito eu) solução para este problema do bug foi feita pelo amigo de fórum senhor TheChessMan. Aqui o post onde ele desenvolveu inicialmente a solução. Parabéns chess.

Fui.

Marcadores: dicas, firefox, webstandards

E-mail Newsletter Feed RSS Resultado! Concursos Shopping Resultado

Não mande dúvidas nos comentários ou no meu e-mail. Mande elas para o fórum de desenvolvedores Webly. Tem mais gente lá gabaritada a responder e você não fica dependendo só do mico.

Comenta aí! Não cai o dedo e me incentiva a escrever mais. (4 comentários)

4 Comentários:

Ramon disse... 05 Junho, 2007 19:41: Caraca isso aconteceu comigo essa semana e resolvi o problema de maneira diferente, quando precisava usar o float eu não podia usar position, o IEca implica com o position e float ao mesmo tempo, vai entender coisas de IEca. Mas como tinha partes do site que precisava usar position absolute, em vez de usar só uma div contendo float e position, usei duas divs o "avô" contendo o position e o "pai" contendo o float, e pronto problema resolvido.

fuiii...
tigo di disse... 07 Agosto, 2007 22:27: Position relative para o elemento pai e até mesmo a remoção do background do elemento pai parecem resolver a questão.

Estou vendo essas informações no livro do Andy Buddc "Criando páginas web com css"
Micox - Náiron J. C. G. disse... 30 Agosto, 2007 09:56: É, este problema é complicado.
Dessa vez o FF não ajuda heheh.
Tem muita solução, é bom agente ter uma gama delas à disposição pra tentar quando o problema cair pragente heheh.

Valeu Tigo e Ramon.
tiagofaustino disse... 28 Janeiro, 2008 14:22: Quer uma solução melhor?

http://www.quirksmode.org/css/clearing.html

Aqui ele muda a div que contém tudo:

div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}

Pelo menos foi a única solução que encontrei que não me causou o famoso peek-a-boo bug do IE!!

Escreva seu comentário (Leia abaixo).

Deixe seu email se quiser resposta por email também, pois o sistema de comentários do Blogger não me informa :( ... Ah, também pode deixar o endereço do seu blog ou site no comentário.
Já estou em outro sistema de blog melhor (wordpress). Se quiser comentar lá também :)
Dúvidas, só no fórum Webly.