Webpoint

Este post é principalmente para quem gosta do Jquery, mas limita-se somente aos plugins. Existe uma infinidade de opções de Plugins no site do Jquery. Apesar de úteis, eles não são para qualquer situação. Se você quer do seu jeito, faça você mesmo. Em um dos tutoriais do site ensina a fazer parte do que estou fazendo aqui. Mas fiz algumas implementações que mostra várias ferramentas úteis do Jquery. Então ao invés de pegar alguns plugins, com poucas linhas de código irei criar um modelo de faq utilizando as marcações HTML dl, dt e dd. Elas são as mais adequadas para este contexto, pois representam uma lista de definição, com um termo de definição e sua descrição. Com o Jquery vamos fazer aparecer somente os títulos do FAQ, pois caso o usuário se interessem por algum ele irá clicar e assim um slideDown será executado. O design pode ser controlado totalmente por CSS e caso o navegador do usuário não possua Script, o FAQ funcionará normalmente, sem o Javascript é claro.

Vamos ao que interessa!

Chega de falar sobre o FAQ e vamos construir este FAQ com Jquery que tanto eu falo. Vale lembrar que eu usei como FAQ mas ele pode ser usado para outros fins, isto depende de você!

Para começar devemos inserir a framework no head do documento, isto deixo para vocês, pois já mostrei como se faz em outros posts sobre Jquery.

Agora podemos trabalhar com a Framework.

Está curioso. Então vamos ver o FAQ Dropdown utilizando o Jquery, pois assim você pode olhar o código fonte e conferir a marcação.

Vamos então ao código Jquery responsável pelo efeito:

$(document).ready(function(){
 
// Configuração do Menu DropDown
 
if(!$("#menu dt").children().not(".titulo").is("span")){
 
$("#menu dt").prepend("<span> + </span>")
 
}
 
$("#menu").find("dd").hide();
 
$("#menu").find("dt").toggle(function(){
 
$(this).next().slideDown("slow");
 
$(this).find("span").not(".titulo").empty();
 
$(this).prepend("<span> - <span>");
 
}, function() {
 
$(this).next().slideUp("slow");
 
$(this).find("span").not(".titulo").empty();
 
$(this).prepend("<span> + </span>");
 
});
 
// Fim da configuração do Drop Down
 
});

Vamos a explicação deste código:

Estrutura condicional:

O que está pedindo para verificar se é falso dentro do if é se o dt dentro do elemento com o id menu(atribuído ao elemento dl) tem um filho que não seja com a classe titulo e que se este filho é um span. Confuso? Traduzindo: Esta seleção retorna se dentro do dt existe um span que não seja da classe titulo. Se não exisitr, ele adiciona este span com o sinal de mais como conteúdo. Sendo assim, inicialmente ele adiciona o sinal de mais dentro de um span através da capacidade de manipulação do conteúdo através do Jquery, deixando assim o código limpo, pois um sinal de mais ou menos caso o javascript esteja desativado, não terá significado algum.

Linha 11

Nesta linha ele chama o método hide para esconder as respostas do faq que estão dentro do elemento dd.

Linha 13

Nesta linha ele chama o método toggle, que tem como parâmetro duas funções: uma para o primeiro click, e outra para quando for clicado novamente.

A função para ser executada no primeiro click seleciona o próximo elemento depois do dt através do método next, que é o elemento dd que estava escondido inicialmente e aplica o método slideDown que faz jus ao nome: deslizar para baixo. A velocidade aceita três parâmentros: "normal", "slow" e "fast".

As linhas abaixo selecionam os spans dentro do dt que não estão com a classe titulo(necessário para evitar o apagamento do título do faq) e aplica o método empty, que remove todos o conteúdos filho da seleção onde foi aplicada. Assim ele remove o span com o sinal de mais dentro. Logo após ele adiciona um span com o sinal de menos.

A função para ser executada no segundo clique faz o contrário. Faz o slide ser para cima, além de eliminar o span com o sinal de menos e adiciona o sinal de mais.

Simples não?

Quando desenvolvi este Blog fiquei muito fascinado nas ferramentas que o Wordpress oferecia e não fiz mais nada além de desenvolvê-lo. Esqueci do "pequeno" detalhe de pesquisar outros blogs do assunto. Só agora que me tornei um "blogueiro" que andei "vasculhando" a comunidade de desenvolvedores Web e percebi o quanto ela é competente e ativa. Tantos desenvolvedores com dois fatores em comum: Web Standard e Jquery. É incrível como esta framework torna mais bonito o desenvolvimento Javascript. Mas deixe o meu fanatismo com o Jquery em outros Posts.

Para começar, ao entrar no fórum do IEvolution encontrei uma comunidade que  ajuda para o que precisar. Então  acabei por chegar no Jquerybrasil, que possui toda a documentação da Framework em português, o que ajuda bastante bons desenvolvedores que não dominam a língua como meu colega de trabalho Daniel Mariz, quanto outras que gostam de ler na sua língua, afinal, somos brasileiros!

Poderia citar aqui uma infinidade de links dessa comunidade, mas dêem uma olhada no Blogroll, por que ele irá crescer a medida que for encontrando os "fiéis" :-).

Depois de navegar por tantos conteúdos e desenvolvedores dedicados em mostrar as vantagens da framework e da Web Standandard, por que não usar o Jquery?

Uma das maiores vantagens do uso de uma Framework Javascript é sua facilidade de trabalhar com o Ajax. Ao invés de criar as requisições pelo httprequest em códigos intermináveis e que precisam ser adaptados para funcionar em todos os Browsers, a framework faz este trabalho para você. Resta ao desenvolvedor a criatividade de aplicá-la. Um dos primeiros motivos de procurar o Jquery foi primeiramente o Ajax. Assim como a maioria das frameworks são procuradas. Com a explosão dessas frameworks Javascript como a Jquery, costuma-se associar seus efeitos e suas outras capacidades com Ajax. Para alguns, tudo de legal e novo com o Javascript, como efeitos de animação e de interface é julgado como Ajax. Essa falsa impressão ocorreu justamente por causa da explosão das frameworks e todas as suas funcionalidades.

O Jquery oferece vários meios de trabalhar com o Ajax, desde requisições simples até as mais complexas. Neste post vou mostrar como fazer uma simples requisição de uma página externa, sendo passadas duas variáveis e chamando um arquivo externo usando o objeto httprequest e com isso dispensando o reload da página.

Primeiro de tudo, não se esqueça de incluir a Framework no head do documento:

<script src="jquery.js" language="javascript">
type="text/javascript"></script>

Agora você será capaz de usar as ferramentas de ajax que o Jquery oferece.

Neste exemplo, irei usar o Ajax para inserir em uma div um conteúdo externo quando o usuário clica em um link.

Enquanto a requisição estiver sendo processada, irá aparecer uma div que funcionará como o carregamento até a requisição ser finalizada.

Abaixo a marcação deste código:

 
<div class="topico">
 <a href="chamada.php" class="exemplo">
   Clique aqui para abrir uma página html pelo httprequest
 </a>
<div id="carregando">
  <img src="images/ajax_preloader.gif" />
  carregando...
</div>
<div class="alvo">
  a página será aberta aqui
</div>
</div>
 

Assim, a div com o id carregando irá ser exibida enquanto não for finalizado a requisição da página.
O código do Jquery está logo abaixo:

$(document).ready(function(){
$("#carregando").hide();
$(".exemplo").click(function() {
  $("#carregando").ajaxStart(function(){
  $(this).show();
$(".alvo").hide();
});
$("#carregando").ajaxStop(function(){
 $(this).hide();
 $(".alvo").show();
});
$.get("chamada.php",
{nome: "Alexandre", idade: "23"},
function(data) {
  $(".alvo").empty().html(data);
});
return false;
});
});

Vamos analisar este código e descrever todos os métodos usados.
Linha 01: Função do Jquery que executa tudo que está dentro depois que todos os objetos DOM foram carregados. Aconselhável ser aplicado em todo código Jquery que você for usar.
Linha 02: Usando o método hide que esconde a div selecionada, no caso a div com id carregando.
Linha 03: Executando o evento click para a classe exemplo(que está aplicada na tag a). Com isto, quando o usuário clicar no link, será executada as funções que virão abaixo.
Linha 04: Aplicando o método ajaxStart na div com id carregando. O método ajaxStart especifica uma função a ser executada enquanto uma requisição se inicia e não há nenhuma outra ativa. Assim, ela manda exibir a div carregando(através do método show) enquanto a requisição estiver sendo processada e esconde a div com a classe alvo que ficará escondida através do método hide.
Linha 08: Aplicando o método ajaxStop na div com id carregando. O método ajaxStop faz o contrário, ele executa uma função quando a requisição está completa. A função executada irá esconder a div carregando assim como mostrará a div com a classe alvo através dos métodos hide e show.
Linha 12: Fazendo a requisição simples através do método $.get. Este método é usado para fazer requisições simples de ajax através do método get. Também poderia ser usada o método $.post se desejasse passar as variáveis através do método post. Os parâmetros são o arquivo a ser chamado, as variáveis que serão passadas com o seu valor e uma função callback, que é executada quando os dados são carregados com sucesso e aceita como parâmetro os dados passados. Assim, dentro desta função eu mandei apagar o conteúdo da div com a classe alvo através do método empty e logo depois executei o método html que aceita como parâmetro o conteúdo a ser escrito na div. Nesse parâmetro eu passei os dados requisitados que estão no arquivo chamada. Aqui eu usei dois métodos em uma mesma linha, lembrando que o Jquery aceita isto perfeitamente.
Linha 17: O return: false é usado simplesmente para anular o comportamento padrão do elemento, no caso o link, o comportamento padrão é clicar e a página ir para o chamada.php sem usar o Ajax. Com isto, eu permiti que os dados também fossem carregados se o usuário não tiver Javascript ou seu browser não aceitar o objeto httprequest.
O arquivo chamada.php: Neste arquivo há no cabeçalho o recebimento dos dados passados pelas variáveis enviadas pela requisição, para assim poder testar se foi recebida com sucesso. O resto do conteúdo é somente um texto aleatório para testar o funcionamento.
Abaixo encontra-se o código das primeiras linhas do arquivo chamada.php:

 
  $nome = $_GET['nome'];  $idade = $_GET['idade'];
 
echo "conteudo requisitado pelo ajax
 
";
 
echo "parâmetros enviados. Nome: ".$nome." idade: ".$idade;

Assim pode ser enviadas quando variáveis forem necessárias no método $.get.

Resultado final

O resultado final é uma simples abertura de uma página externa sem necessidade de se carregar a página. Não existe apenas esta maneira de se escrever o código com o Jquery, existe uma infinidade de métodos e ainda requisições mais complexas que podem ser feitas. Esta é apenas para começar e para mostrar como se torna simples fazer estas requisições com o Jquery e além de tudo, funcionar em todos os browsers que suportam o httprequest sem problemas. A documentação para os métodos para o Ajax pode ser encontrado no site.

Exemplo da requisição ajax mostrada neste post

Espero poder ter ajudado e se quiserem, sintam-se a vontade de compartilhar métodos para requisições simples deste tipo. Espero que com mais este exemplo, tenha mostrado o quanto essa framework pode ser útil no dia a dia do desenvolvimento Web.

O Jquery oferece um Plugin para escolha de datas em campos de textos excelente. Ele se chama Jcalendar. Ele é amplamente customizável e a aparência pode ser controlada totalmente por CSS. O único problema que sua estrutura é em inglês e ao traduzir as strings no arquivo original, o layout bagunça um pouco. Então resolvi fazer uma versão em português para quem quiser implementar em seu site. Quem já tem implantado, basta substituir o arquivo.

Versão em Português do Jcalendar

CSS adpatdo do Jcalendar para a versão em Português

Como funciona o Jcalendar?

Para o seu funcionamento, estes dois arquivos tem que estar referenciados no head do documento(O Jquery, e o plugin):

Para o script:

<script src="jquery.js" type="text/javascript">
 
</script>
 
<script src="jquery.calendar.js" type="text/javascript">
 
</script>

Para o CSS:

 
<style type="text/css">
  @import url(jquery-calendar.css);
</style>
 

Depois disto, para aplicar um simples calendário, utilize as seguintes linhas:

$('input selector').calendar();

É possível também passar várias configurações, como autopopup, ícone em image, o formato da data etc.

Alguns exemplos do Jcalendar

Parâmetros

O código para o segundo exemplo encontra-se abaixo:

$('input selector').calendar({autoPopUp: 'both',
 
  buttonImageOnly: true,
 
  buttonImage: 'calendar.gif',
 
  buttonText: 'Calendar'});

Assim, com esses parâmetros você especifica uma imagem para servir de ícone como calendário:

• autoPopUp - Especifica se o calendário vai aparecer quando o usuário der focus no campo (focus), quando o ícone for clicado (buttom), ou em ambos os casos(both)
• buttomImageOnly - Coloca somente a imagem, aceita true ou false
• buttomImage - especifica a imagem que será o ícone do calendário
• buttomText - especifica o texto do calendário

Se desejar mudar o layout, apenas modifique o CSS. Uma boa maneira de se orientar na hora de montar é usar o firebug para ver o nome das classes e ids no formulário, mas fica a critério de vocês.

Considerações finais

O jCalendar não funciona no IE 6 e 7 se for referenciado no script sem o import, portanto, não deixem de colocar como está listado acima. O Opera apresenta um bug no dimensionamento do box do calendário. Vou tentar solucionar e posto aqui quando conseguir, mas ele funciona muito bem na maioria dos Browsers. Se tiverem algum problema, comentem que eu posso ajudar quando for possível.

Sempre estive com o IE6 instalado, apesar de ter lançado o IE 7. A verdade é que a última versão do Internet Explorer passou a renderizar bem mais parecido com o Firefox do que com o IE 6, portanto, atualizar o IE para o 7 seria deixar de testar em um browser que dá medo pelos erros que aparecem, além de ser ainda o mais utilizado. Ao finalizar alguns sites, no entanto, consegui sem hack algum fazer visualizar no Firefox 2.x e no IE 6. Depois de um tempo quando estava no PC com um IE7, resolvi entrar no site para "desencargo de consciência", o resultado foi inesperado: vários erros de layout.

Não há uma maneira de ter os dois no mesmo pc? A resposta é sim. Pesquisando pela internet e pelos blogs mais responsáveis sobre o assunto, encontrei soluções que não vale a pena nem citar aqui, pois são bastante complicadas e requer entrar em configurações do Windows e sem garantia de que vai funcionar. Não me arrisquei, pois para conseguir eu teria que instalar o IE 7. Uma vez instalado, voltar ao estadao anterior e meu antigo IE 6 seria um problema maior.

Então descobri um Software para este fim. Ele se chama Multiples IEs . Com ele, você pode instalar várias versões do Internet Explorer, desde o 3.0 até o 6. Para isto, você deve atualizar seu IE para o 7, e assim fazer a instalação do software pelo site. Há nos comentários do site muita gente relatando alguns bugs, mas na empresa onde trabalho ele foi implantando em todos os computadores para desenvolvedores e funcionou perfeitamente.

Agora tenho em mãos e uma maior segurança após passar pelas versões 6 e 7 do IE. Instalei a versão 5.5 só para rir um pouquinho, pois fazer um site que funcione para ele também é um sofrimento e se você nâo for um "doente" por visualização em "todos" os browsers, você pode instalar só de curiosidade.

Este é o primeiro posto sobre o Jquery. Para quem nunca ouviu falar, este post será um ótimo ponto de partida para quem quer começar. Se já conhece, é uma demonstração de como fazer um efeito útil usando poucas linhas de script graças as capacidades desta framework.

Primeiro de tudo, por que Jquery?

Jquery é estável, eficaz e uma extensível framework. Com ela, você não precisa mais colocar eventos no HTML e pode separar de vez scripts da marcação. Se você fizer um menu com várias animações e efeitos do Jquery, a marcação do menu continuará sendo de ul e li simples. Se a framework for tirada em uma linha na inclusão do script externo na declaração no head do documento, a página não cairá em vários erros de script, mas sim irá permanecer sem suas funcionalidades.

Neste exemplo irei apresentar uma ferramenta muito útil. Quando o usuário está em tabelas, é conveniente ele se localizar e não ter que colocar o dedo na tela para tal fim, por isto é ideal que tabelas extensas tem um comportamento hover (quando o mouse passa em cima de um elemento), esta linha se destacar das demais, deixando o usuário localizar os dados desta linha.

Com o Javascript ela não é difícil de se fazer também. Por isto, para fins de comparação vou apresentar o mesmo efeito adquirido com três tecnologias, o Jquery, o Javascript e o CSS.

A última versão do Jquery desde a publicação deste post:

Jquery Última versão 1.1.3.1

Utilizando o Jquery

Com o Jquery, primeiro de tudo é preciso incluir a framework no cabeçalho do documento, utilizando a seguinte linha:

<script src="jquery.js" type="text/javascript"></script>

Assim, todas as funcionalidades da Framework ficará disponível. Abaixo vai o código para o efeito, e explicação de cada item virá depois:

 $(document).ready(function(){
 $('table#tabela_exemplo tbody tr').hover(function(){
    $(this).toggleClass('linha_hover');
 }, function(){$(this).toggleClass('linha_hover');
  });
});

Para quem não conhece o jquery, este código é estranho. O importante é notar que ele pode vir entre as tags no cabeçalho ou em um script externo.

Na linha 1, temos a declaração inicial do Jquery, ela diz: "execute o que vier dentro depois que o documento estiver pronto e carregado".

O símbolo "$" significa a função do Jquery que quando seguido de parentêsis cria uma instância de um objeto que você selecionou, ou seja, o código "$(document)" cria um objeto do documento (seguindo o DOM do Javascript) e com ele uma vez criado, pode ser atribuídos métodos do Jquery, assim como métodos e extensões personalizadas. Assim, a linha 1 como um todo diz para: Crie uma instância do documento e dê a ele o método ready, que executa tudo o que estiver dentro depois que o documento estiver todo carregado.

Logo abaixo ele cria uma instância das seleções da linhas da tabela. Ou seja, você pode selecionar qualquer coisa no documento pelo Jquery, se você fizer "$(p)", você estará selecionando todos os parágrafos. Se você fizer "$('.nome_da_classe')", você estará selecionando tudo que possuir a classe nome_da_classe, assim ele aceita toda a hierarquia do CSS para seleção do elemento.

Então quando eu fiz na linha 2 eu selecionei as linhas da tabela com a id tabela_exemplo e dei a ela um método chamado hover, que específica duas funcões como parâmetro, uma delas será quando o mouse passar em cima, e a outra quando o mouse sair do elemento.

Dentro delas, eu selecionei a linha da tabela fazendo referência ao próprio objeto através do this e lancei outro método que é o toggleClass, que aceita como parâmetro o nome da classe. Assim ele adiciona a classe se ela não estiver presente, e retira a classe se estiver presente. Ou seja, ela alterna a classe, sendo o método mais prático para este efeito. Poderíamos utilizar para executar dentro da primeira função o addClass e na segunda o removeClass, mas o toggleClass já detecta se a classe está presente ou não, adicionando e retirando quando necessário.

Assim, no CSS, basta colocar:

 
.linha_hover {
  background-color: #FFFFCC;
}

E assim ela irá mudar o fundo da linha quando o usuário passar o mouse, e irá tirá-la voltando ao estado anterior quando tirar e assim sucessivamente.

O melhor do Jquery é que ele é bastante extensível. Assim, você pode criar um método que basta selecionar a tabela para automaticamente já adicionar este comportamento. Ou ainda procurar por plugins que façam ainda mais, ordene a tabela, aplique cores alternadas e outras coisas. Isto vou deixar para outros posts.

A documentação do Jquery é bastante completa e todas essas funcionalidades e métodos podem ser encontradas. O site é em Inglês, mas também já está disponível uma documentação em Português.

Solução por Java Script

Há várias maneiras de se atingir este efeito com o Javascript. Algumas adicionam eventos na tabela, "sujando" o código, outras usam getElementById ou getElementByName , que muitas vezes funcionam diferentes para cada Browser. A vantagem do Jquery que ele internamente cuida das diferenças de Browsers e deixa para você somente o trabalho de selecionar os objetos do documento por seleção como é feita no CSS. Todas as soluções no Javascript, cria funções que são percorridas por laços e códigos maiores e mais confusos. O Jquery é limpo, simples e rápido até para soluções menores. Com mais três linhas de código você coloca as tabelas ordenadas e com cores alternadas, e ainda conter os efeitos de hover sem nenhum erro de script em tal browser.

Solução por CSS

A solução por CSS seria a mais bela se não fosse por um maldito detalhe: Funciona em todos os browsers, menos o IE 6! Abaixo o a linha de CSS que faz estes efeito:

#tabela_exemplo tr:hover {
  background-color: #FFFFCC;
}

Muito simples não? O IE 6 não aceita devido ao fato da pseudo classe hover ser só aceita em links. Em outros browsers, assim como no IE 7, ele é aceito para qualquer elemento, como divs, inputs e até linhas de tabelas, representadas pela tag tr.

Observações sobre o Opera 9

No Opera9 acontece um bug esquisito. Com o código abaixo o script passa a funcionar em todos os browsers:

$(document).ready(function() {
  $('table#tabela_exemplo tr').hover(function(){
    $(this).css("background-color","yellow");
  }, function(){
    $(this).css("background-color","white");
  });
});

O metódo CSS aceita dois parâmetros que são os pares "propriedade","valor", E assim você pode inserir nos objetos selecionados propriedades CSS desejadas. Agora ele funciona na maioria dos Browsers.

Resultado

Assim, podemos constatar que o Jquery oferece uma solução que poderia ser feita através de CSS, mas falta suporte ao Browser que ainda é o mais utilizado, portanto, ainda é necessário um script, mesmo que seja simples, para funcionar em todos os browsers mais recentes.

Tabela com efeito hover nas linhas utilizando o Jquery

Há sempre uma dica quando você valida o código na W3C. Estes dias eu li um que foi muito útil. Basicamente ele dizia:

Muitas pessoas usam nome de classes como textoazul ou bordavermelha. A melhor maneira de nomear suas classes é pela sua função no html que ela está inserida

Se você colocar um nome da classe bordaVermelha e essa borda ficar azul? Ou seja, a aparência pode sempre mudar, mas a função que a classe representa não. Então é sempe uma boa prática nomear classes de acordo com sua função ou contexto e não com suas características. Já me deparei com esses nomes, mas realmente é um hábito ruim de programação CSS. Abaixo, vai as dicas da W3C de nomes bons e ruins:

Nomes bons

• warning
• important
• download_imagem

Nomes ruins

• fundo_azul
• borda_verde
• lista_bonita

Isto não vai prejudicar a apresentação final, mas com certeza é um bom hábito e uma boa prática para se ter um código mais bem lido e com uma melhor manutenção.

Os layouts devem ser Tableless e não os sites. Tabelas tem seu lugar, não no layout, mas sim para mostrar dados tabulares. Até para formulários de contato e de registro não é nenhum "pecado" usá-las. Posteriormente irei postar sobre a construção de formulários com CSS, sem tabelas para mostrar que não é tão difícil e é bastante versátil. Mas isto é para outra oportunidade. Aqui vou falar para quem decide estilizar tabelas totalmente por CSS e se depara com situações esquisitas. Quando você coloca a propriedade border na tabela, a borda circunda os limites desta, mas você quer que a tabela seja uma grade não é isso? Então você coloca borda nas células da tabela. Então surge uma borda tanto circundando a tabela, quanto dentro das células. O problema surge quando você observa o resultado. Se a borda da tabela está com 1px, por exemplo, e as céluas com 1px, haverá limites que a borda irá ter 2px, pois as bordas da célula irão se encontrar com as bordas da tabela e assim irão somar sua largura.

Desta vez não terá necessidade nem de ilustrar o resultado, pois isto é bastante claro e intuitivo, além de ser o comportamento de todos os browsers.

A propriedade border-collapse

A propriedade border-collapse define se as bordas em uma tabela vão se fundir ou vão ser separadas.

Colocando border-collapse: separate irá ter um comportamento como descrito acima, ou seja, se duas bordas se encontrarem, elas se somarão, aumentando sua largura. Este é o comportamento padrão dos browsers. No entanto, ao colocar border-collapse: collapse irá fazer com que dois pixels que se encontre, por exemplo, gere para o usuário apenas um pixel, o que é ideal quando se deseja construir uma tabela. Então para fazer uma tabela usual, como se fazia com html quando o atributo border era escolhido, deve se fazer o seguinte código:

 
table {
  border: 1px solid black;
  border-collapse: collapse;
}
 
table td {
  border: 1px solid black;
}

Com isso, a tabela ficará preenchida tanto nos contornos quanto nas células com uma borda de apenas 1 pixel, como esperado.

Para quem trabalha com Float, as vezes há a necessidade de colocar o layout em uma DIV que podemos chamar de container. Ela é responsável por controlar mais duas divs que funcionam como uma coluna no Layout onde tudo se encaixa em uma estrutura simples e objetiva, como o Holy Grail (nome dado ao layout típico de um cabeçalho, três colunas).

O problema surge quando esse container não abriga as DIVs internas no Firefox quando se usa float, deixando layout como na figura abaixo:

Nesta visualização, há um container amarelado(que não aparece), uma div cinza flutuando à esquerda, uma div azul claro flutuando à direita.

O código CSS está logo abaixo:

 
#container {
 
  width: 300px;
  height: auto;
  margin: auto;
  border: 1px solid black;
  background-color: #FFFFCC;
 
}
 
#esquerda {
 
  width: 100px;
  float: left;
  background-color: #CCCCCC;
  border: 1px solid red;
 
}
 
#direita {
 
  width: 196px;
  float: right;
  background-color: #CCCCFF;
  border: 1px solid gray;
 
}

Como a altura do container está escolhida para auto, ela deveria se comportar fechando em uma só box as caixas internas, mas ela fica quase inperceptível, se não fosse a borda de 1px que faz aparecer, mostrando-a como o Firefox interpreta de maneira errada, se você olhar no IE, verá algo do tipo:

Desta vez não foi o IE que não se comportou da maneira esperada. Bem, se isto pode ser considerado um Bug, há contradições, pois muitos odeiam admitir que o Firefox falharia, mas o comportamento esperado seria este, pois a div container está com o código abaixo:

 
<div id="container">
<div id="esquerda">aqui ficará o conteúdo da esquerda</div>
<div id="direita">aqui ficará o conteúdo da direita</div>
</div>
 

Assim, se a div tivesse sido fechada logo após sua abertura, estaria certa a visualização do firefox.

Se a altura do Box "mestre" não for auto, ele irá se expandir até aquela altura, ou seja, você teria que colocar a altura do tamanho da maior página, o que seria uma solução problema, por que você teria que mudar toda vez este valor quando mais conteúdo é esperado.

E a solução?

Um simples propriedade deixa a visualização esperada no Firefox e não alterna nada no IE 6 e 7.

Apenas adicione a div que servirá como container overflow: auto e este box irá se expadir até o fim da div com maior altura se não for dada nenhuma margem.

Assim, o código do CSS do container ficará assim:

 
#container {	width: 300px;
 
 height: auto;
 
 margin: auto;
 
 border: 1px solid black;
 
 background-color: #FFFFCC;
 
 overflow: auto;
 
}

Sobre o overflow: auto

Esta propriedade que resolveu uma grande dor de cabeça tem a seguinte especificação na W3C:

Geralmente, o conteúdo de um box é geralmente confinado nos limites de conteúdo deste box. Em certos casos, este box pode "transbordar", significando que seu conteúdo fique parte ou completamente fora do box

Portanto, esta propriedade garante que o conteúdo irá contornar os boxs internos até seu final, não deixando nenhuma parte "sobrando".

Esta propriedade já deveria ser padrão no firefox, mas precisa ser especificada para funcionar como esperado. Ou seja, ela é precisa ficar explícita.

Esse é um grande problema, pois na maioria dos layouts este tipo de configuração precisa ser empregada.

No entanto, se não for bem calculada e planejada as dimensões, por esta propriedade estar explícita, ao ultrapassar os limites, o box que possui estar propriedade apresenta sua própria barra de rolagem para permitir que se chegue aos seus contornos. Portanto, cuidado na hora de usá-la. Sempre certifique-se que as dimensões estão corretas.

Espero mais uma vez ter sido útil e comentem, me diga se acham isto um bug, se já teve problemas com esta propriedade. Sintam-se a vontade para falar, afinal, estamos aqui para falar das soluções de problemas que nos pegam de surpresa na hora que caímos nos standards.

Este é o meu primeiro Post. Demorei muito antes de escolher por onde começar, deveria iniciar por problemas antigos que já resolvi e deveria compartilhar com os sofredores desenvolvedores HTML / CSS, ou deveria começar com problemas recentes?

Resolvi começar então com um problema que um companheiro de trabalho teve hoje e que eu já havia enfretado. Mais uma vez, é um bug do IE. Alguém já percebeu, que ao usar um float, por exemplo, com o valor left, ao usar a propriedade margin, por exemplo, de 100px, o IE na verdade faz esta margem ficar com 200px? Para entender melhor, logo abaixo está a solução traduzida do site Position is Everything. O texto original encontra-se no endereço http://www.positioniseverything.net/explorer/doubled-margin.html . O texto abaixo foi resumido e readaptado.

O que há de errado?

Um programador inocentemente coloca um float para esquerda em um box, e usa uma margem esquerda no float para tirálo da extremidade um pouco. Parece bem simples não? Simples até ser visualizado no Internet Explorer, onde a margem esquerda misteriosamente é duplicada!

A maneira que deve ser

O exemplo abaixo mostra uma DIV beje em que está contida um box verde com a propriedade float: left e uma margem esquerda de 100px. Até aqui tudo bem.

Abaixo está o código que gera esta visualização:

 
.floatbox {
  float: left;
  width: 150px;
  height: 150px;
  margin: 5px 0 5px 100px;
  /*Este ultimo valor aplica uma margem de 100px
     a esquerda do box beje */
}

A dobradinha no IE

O mesmo código faz o Internet Explorer mostrar de uma maneira levemente diferente. A figura abaixo mostra como o IE faz este arranjo.

Que diabos está acontecendo? Não faça estas perguntas bobas, é o IE, não se lembra? Conformidades com as especificações são somente esperadas, não aplicadas.

Pontos importantes

Este bug ocorre somente se a margem no float vai na mesma direção do float. Ou seja, se você deu um float left e um margin-left, o bug ocorrerá no IE. Somente a primeira linha de float irá ser atingido pelo bug. Além disso, a margem dupla apresenta simetria, trabalhando da mesma maneira para a esquerda, quando para direita.

Finalmente, uma saída

Steve Clason descobriu uma saída. Esboçada nesta demonstração. Ela corrige tanto este bug da margem dupla quanto outro bug da identação de texto também. É um bug clássico do IE, usando uma propriedade para corrigir um bug que afeta uma uma propriedade irrelevante.

E a solução?

Olhe isto. Simplesmente coloque display: inline no box que está com a propriedade float e assim todos os browsers vão visualizar de maneira semelhante, incluindo o IE.

Abaixo está o código com a respectiva propriedade que estava faltando para corrigir o bug:

 
 
.floatbox {
 
    float: left;
    width: 150px;
    height: 150px;
    margin: 5px 0 5px 100px;
    display: inline;
 
    /* Esta propriedade acima
        corrige o bug no IE */
  }

Abaixo está o código na prática, uma sem o display: inline e outra com o display: inline. Visualize no IE para ver como ele renderiza esta página.

Demonstração do BUG da Dupla margem.

Espero que tenha sido útil com o este post, é primeiro de muitos retratando todos os problemas que surgem no dia a dia do desenvolvimento Web Cross-Browsers. No próximo irei falar de mais uma propriedade que surge como uma luz na escuridão, desta vez não é um BUG do IE, mas do Firefox.