Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Teste seu conhecimento 08

Publicado em: 2008-02-29 — 9.987 visualizacoes

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:

borda pontilhada

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!

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

Esta matéria foi publicada em: 2008-02-29 (sexta-feira). 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.

15 comentários na matéria: “Teste seu conhecimento 08”

  1. JorgeNo Gravatar disse:

    Eu mesmo já me deparei com isso =(
    Alguém conseguiu solucionar?
    Abraço!

  2. MarceloNo Gravatar disse:

    Boa dica. Vlw!

    Abraços,
    http://www.galaxhost.com.br

  3. André Mácola MachadoNo Gravatar disse:

    Desculpe pela demora, esta meio sem tempo. mas bem, ja mandei um e-mail pra vc.

  4. BrunoNo Gravatar disse:

    Minha contribuição segue para seu email Maujor:

    Um abraço a todos

  5. MaujorNo Gravatar disse:

    Olá
    @Rodrigo e @André Mácola
    Convido vocês a enviar a solução encontrada para: maujorcss[arroba]maujor[ponto]com.

  6. André Mácola MachadoNo Gravatar disse:

    Então Maujor…. cade a sua solução?

  7. underNo Gravatar disse:

    Acho o Firefox superior ao IE

  8. nellNo Gravatar disse:

    Thanks, I will try this in my blog
    http://2refresh.blogspot.com/

  9. KeidiNo Gravatar disse:

    Consegui fazer o pontilhado mais não está renderizando na mesma espessura… vou continuar buscando a solução.

  10. underNo Gravatar disse:

    Obrigado pela dica

  11. André Mácola MachadoNo Gravatar disse:

    Creio que consegui =). Em ambos os browsers

  12. Luiz TiagoNo Gravatar disse:

    Muito bom.
    Não sei ainda a solução, mas ainda restam alguns dias não é ?! Estou tentando!

  13. André LuizNo Gravatar disse:

    Já havia feito algo parecido antes. Tinha que colocar sombras em imagens que iriam variar de tamanho dinamicamente.

    É só pensar um pouco antes de começar a fazer que logo vem a idéia (bem simples por sinal).

    É um ótimo exercício! Boa sorte para quem for tentar!!

  14. Fabiano PereiraNo Gravatar disse:

    Poxa, que interessante!

    Vou tentar!

    http://fabianopereiradesigner.blogspot.com/

  15. Rodrigo CapuskiNo Gravatar disse:

    Resolvido!
    Eu nunca tinha pensado numa solução para esse problema. É mais simples do que parece.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo