Luan Garcia » xhtml, css, jquery e webstandards

Vamos falar de um bug muito chato e que atrapalha demais a nós desenvolvedores.

Quantas vezes nos deparamas com um bug chato e que a príncipio nao saberíamos como resolver? Então é sobre um destes que vou falar agora.

Este bug ocorre em div’s que possuem elementos com float. Qual é o bug? Simples, toda vez que uma div possui elementos com float, essa div perde altura. Ahh nao entendi nada.. calma, vai entender, mas antes baixe meu exemplo abaixo.

Obs.: Esse bug ocorre tanto no FF quanto no IE.

Clique aqui para baixar este exemplo.

Reparem que eu praticamente fiz um tutorial dentro do html. Vou dar uma resumida do que tem lá.

Primeiramente voce irá se deparar com o html todo bonitinho, sem nenhum bug. A princípio vou pedir para comentar os css’s(no tutorial dentro do arquivo vem explicando) para que o bug possa aparecer. Depois disso começa a fase de teste.

Na estrutura que montei existe uma div chamada #container e dentro dessa div tem duas div’s com as respectivas classes: .c1 e .c2. E logo abaixo da div #container (fora dela), está a div .teste.

Vocês vão reparar que de primeira vou dar uma solução que resolve porém que não é a ideal. Isso servirá para abrirmos um leque de opções para “n” tipos de bugs. No exemplo que dei, o bug começa quando peço para comentar no css de #container os atributos overflow e zoom. Neste mesmo momento tiraremos também o atributo clear: both; de .teste.

O que acontece é o bug que estamos estudando. A div #container perde altura e ai com isso, a div .teste que esta abaixo, vai parar ao lado das divs .c1 e .c2.. Repare isso pelas bordas que coloquei em cada div, cada borda com uma cor diferente para podermos diferencia-las.

Num dos primeiros testes que fiz, eu coloquei a div .teste para baixo, no lugar onde ela, de fato, deveria estar, mas para que isso aconteça, é necessário descomentar o atributo clear: both; que colocamos no início. Este é apenas um meio de resolver, porém, longe de ser a solução ideal, pois reparamos que por mais que a div .teste vá para o seu lugar certo, a div #container continua sem altura… e para corrigir isso vamos para o próximo passo.

Existem pelo menos umas 2 maneiras parar resolver esta tipo de bug(que eu conheça). A primeira é com o famoso clearfix. Acho que todos ja ouviram falar desse camarada, mas não é o foco de hoje, vou mostrar como resolver de outra forma.

Vocês lembram que no início do tutorial, eu pedi para comentar os atributos overflow e zoom da div #container? Iremos por partes. Vamos precisar do FF e os IE’s da vida para fazer os teste… Então abram FF,IE7 / IE8, e o IE6.

Abertos os navegadores, vamos no css e descomentem o atributo overflow, apenas ele. Testem nos navegadores. Como podem ver, o bug foi corrigido apenas no FF, porém nos IE’s, ele nao funfou. Logo, vamos ter que descomentar o atributo zoom, pois é este elemento que vai fazer com que a solução funcione nos IE’s.

Pronto..e ai está nossa solução mega simples para corrigir a perda de altura em divs que possuem elementos com floats. Neste tutorial eu usei o overflow:hidden; porém, pode-se usar o overflow: auto; que funciona da mesma forma.

Valeu galera, espero que gostem e que sirva para algo útil. Abs!

Um milagre galera!!! Dois posts no mesmo dia!

É o seguinte,há um tempo atrás me deparei com um bug muito chato do ie6 e que suei pra descobrir como resolver, então vale apena a dica.

Muitas vezes nós não entendemos alguns bugs do ie6 mas mesmo assim estamos la firmes e fortes. Alguem por acaso ja se deparou com o bug de duplicar a última letra? Pois bem, se já aconteceu isso com você, agora não vais mais acontecer.

Uma tendência dos desenvolvedores mais organizados, é comentar algumas partes do seu código afim de não se perder e deixá-lo mais intuitivo. Porém, alguns desenvolvedores abusam um pouco dos comentários (não que não possa, mas eu adoto a seguinte postura para meus sites: coloco comentários apenas nos pontos mais importantes, ou seja, na maioria dos casos, no fechamento das tags mais importantes de estruturação) e esse abuso causa este bug.

Pelo menos comigo, todas as vezes que tive esse problema, consegui resolver tirando o excesso de comentários que estavam a volta do elemento com esse problema.

Então é isso galera, é um bug bem simples de evitar mas que com certeza já deu dor de cabeça a muitos desenvolvedores.

Se alguém tiver outra solução acho interessante postar, pois eu mesmo desconheço

Abs!

Como sabemos, o IE6 é composto por dezenas de bugs chatos e incovenientes.

E é sobre um deles que vamos falar agora: em elementos com float, se dermos uma margem para a direita ou esquerda, o IE6 tem mania de duplicar essa margem.

Normalmente os(alguns) desenvolvedores falam: “Ah mas resolver isso é facil, é so colocar um hack pro ie6 dizendo que ele tem metade da margem que estao nos outros.”

Sim claro, isso é óbvio, mas que tal resolvermos isso sem hack?

Então faremos o seguinte:

- No elemento que possui o float e a margem, se ocorrer do ie6 duplicar essa margem, use o display: inline; que este bug irá ser corrigido automaticamente.

Ex.:

elemento {
width: 300px;
float: left;
margin-right: 50px; /*essa margem dobra no ie6, logo fica com 100px*/
display: inline; /*corrige o erro da margem duplicada*/}

Valeu galera, até a próxima