Blog do Maujor - Tutoriais e pensamentos, CSS, web standards, acessibilidade, tableless

Bug da borda pontilhada no IE 6 e anteriores

Este é um bug bem conhecido e a maioria dos desenvolvedores CSS já deve ter vivenciado a experiência em algum de seus projetos.
Se você define uma borda pontilhada de de 1px para um elemento qualquer na sua página, ao visualizar a borda em um navegador complacente com as Web Standards tudo se passa como esperado. Mas, a visualização no IE 6 ou anteriores se revela inconsistente e completamente equivocada, pois a borda lá está e no lugar certo, mas tracejada e não pontilhada.

Considere a declaração a seguir que coloca a referida borda em uma DIV:

div#borda {
   width: 270px;
   height: 70px;
   background: #ffc;
   border: 1px dotted #000;
	}

E observe nas figuras a seguir a renderização da borda:

A solução clássica para resolver este bug é usar uma imagem do pontilhado e colocá-la como fundo do elemento.
Esta solução tem sido usada com relativa freqüência quando se trata de uma linha vertical ou horizontal separando duas áreas do site como por exemplo: separar a coluna de navegação da coluna principal com uma linha pontilhada vertical.

Mas, usar uma imagem do pontilhado para colocar borda nos 4 cantos lados de um elemento requer a inserção de mais três elementos, cada um com uma imagem de fundo para cada lado do elemento. Assim este desafio consiste em obter o efeito de borda pontilhada de 1px no IE 6 obdecendo as seguintes regras.

Regras gerais:

1. Usar somente (X)HTML e CSS (sem scripts);
2. Não usar imagens;
3. Não usar tabelas;
4. Não usar estilos inline;
5. Não usar hacks;
6. A renderização deve mostrar uma borda pontilhada na cor preta em volta de uma div com 270px x 70px com fundo #ffc, tanto no IE6 como no Firefox.

Bem, este é o desafio.
Caso você consiga resolver, guarde sua solução e não envie para mim.
Poste um comentário dizendo que resolveu, mas não publique a solução.
Dentro de aproximadamente 1 mês escolherei um dos que disseram ter resolvido, convidando-o a enviar-me a solução para ser publicada juntamente com minha solução.

Se você pretende acompanhar a matéria e participar da escolha da solução é uma boa idéia se inscrever para receber notificações de novos comentários marcando o checkbox no formulário dos comentários.

Em tempo: Você; receberá um belo prêmio caso encontre a solução.
O prêmio é a satisfação de dizer para você mesmo que está progredindo com seus conhecimentos sobre CSS.
Prêmio maior do que este não pode haver!

----------------x-x-x---------------    fim da matéria    ---------------x-x-x---------------

Esta matéria foi publicada em: 2008-02-29 (Friday). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2008/02/29/teste-seu-conhecimento-8/trackback no seu site.