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

Solução do teste seu conhecimento 8

Publicado em: 2008-04-13 — 12.829 visualizacoes

Solicitei aos dois leitores, que postaram comentário afirmando ter resolvido o problema, o envio da solução por eles encontrada para eu publicar, no entanto passado mais de dez dias nada recebi e assim publico a solução. O leitor Bruno Lutti enviou uma solução usando a palavra-chave thin para declarar a espessura da borda. Esta solução poderá ser usada sem problemas desde que se admita espessuras diferentes na renderização da borda pois thin para os navegadores complacentes com as Web Standards equivale a 1px, mas para os IE 6 e anteriores e também para o IE7, equivale a 2px!

A solução com espessura thin é a seguinte:

...
<style type="text/css" media="all">
div#borda {
   width: 270px;
   height: 70px;
   background: #ffc;
   border: thin dotted #000;
	}
</style>
</head>
<body>
<div id="borda"></div>
</body>
</html>

A solução que fornece uma melhor aproximação para uma borda pontilhada no IE6 e anteriores requer uma DIV extra e um pouquinho de imaginação.

Vamos usar a mesma DIV#borda mostrada anteriormente e declarar para ela uma espessura de borda igual a 2px! Sabemos que todos os navegadores renderizam bordas pontilhadas de 2px, pois o IE não apresenta problemas com bordas pontilhadas de espessura igual ou maior do que esta.

A seguir vamos declarar dentro da nossa DIV#borda uma outra DIV#auxiliar com largura e altura iguais a 100%, ficando com duas DIVs de mesmas dimensões uma dentro da outra.

Declaramos para a DIV#auxiliar uma borda sólida de 1px e da mesma cor de fundo da DIV#borda, no nosso exemplo a cor é: #ffc.

Agora o “truque”: A borda da DIV#auxiliar que tem a mesma cor do fundo, vai servir de máscara para a borda da DIV#borda. Para “empurrar” aquela borda para cima da borda de 2px e fazer a máscara, basta declarar margem negativa de 1px para a DIV#auxiliar.

E finalmente as CSS e a marcação

...
<style type="text/css" media="all">
div#borda {
   width: 270px;
   height: 70px;
   background: #ffc;
   border: 2px dotted #000;
	}
#auxiliar {
	width:100%;
	height:100%
        position:relative;
	z-index:10;
	border:1px solid #ffc;
	margin:-1px;
	}
</style>
</head>
<body>
<div id="borda">
<div id="auxiliar"></div>
</div>
</body>
</html>

Sem entrar em considerações semânticas, uso de marcação extra e outras ilações teóricas tão próprias dos xiitas teóricos das Web Standards, considero esta técnica uma solução genial e o crédito vai para Paul O’Brian O’Brien um inglês profundo conhecedor de CSS e co-autor do livro The Ultimate CSS Reference.

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2008-04-13 (domingo). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2008/04/13/solucao-do-teste-seu-conhecimento-8/trackback no seu site.

12 comentários na matéria: “Solução do teste seu conhecimento 8”

  1. Muito bomNo Gravatar disse:

    Parabens pelo blog muito bom msm!!

  2. JonathanNo Gravatar disse:

    Excelente blog! Parabens!

  3. PhilipeNo Gravatar disse:

    Adorei seu blog amigo
    Vou assinar o feed Gostaria que vc tbm desse uma passadinha no meu pra umas dicas
    Obrigado

  4. Anderson FelixNo Gravatar disse:

    Mais isso só funciona com 2px… e se eu quiser usar 1px .. no IE não tem jeito nenhum?

    [[]]
    A. Felix

  5. Rodrigo CapuskiNo Gravatar disse:


    (…)
    @Rodrigo e @André,
    Não conferi a solução de vocês. O meu email solicitando a solução seguiu há mais de 10 dias.

    Maujor…
    Não chegou nenhum email solicitando a solução.
    Mas sem problemas, valeu o exercício.
    Parabéns.

  6. Francisco dos SantosNo Gravatar disse:

    Olá! Maurício,

    Ótimo exercício de HTML e CSS. Gostei muito.

    Apenas uma correção, o nome do autor de The Ultimate CSS Reference, é Paul O’Brien.

    Tudo de bom.

  7. André Mácola MachadoNo Gravatar disse:

    Sem problemas Maujor, realmente eu esqueci de mandar, a correria aqui eu nem me toquei.

    De qualquer forma o link esta ai no comentário mais acima, coloquei 3 formas de se fazer.

    Uma das é bem parecida com a sua e o resultado é praticamente igual, se não igual.

    Pra quem não achou o link aqui vai de novo: Solução Mácola

  8. MaujorNo Gravatar disse:

    @Bruno,
    A solução com margin:0; não está certa, pois causa borda esquerda e superior de 2px e direita e inferior de 1px no FireFox e as quatro bordas de 2px no IE6 e menores. Você testou mesmo?
    Nota: zero é zero e fim de papo!
    Para que escrever 0 px ou 0 metros ou 0 em etc.
    Escreva simplesmente margin:0;

    @Rodrigo e @André,
    Não conferi a solução de vocês. O meu email solicitando a solução seguiu há mais de 10 dias.

  9. André Mácola MachadoNo Gravatar disse:

    lembrando que fiz 3 diferentes tipos de solução.. e uma sendo bizarra ;D

  10. André Mácola MachadoNo Gravatar disse:

    Minha versão, eu ja havia feito a tempos mas acabei esquecendo de mandar. Veja aqui

  11. Rodrigo CapuskiNo Gravatar disse:

    Minha solução foi exatamente essa, apenas algumas poucas diferenças.
    Segue o link: Solução Capuski

  12. BrunoNo Gravatar disse:

    Maujor, testei com margin : 0px na div auxiliar e ficou melhor do que com -1, pois no FF a border-top fica parecendo que é metade da espessura das outras bordas… Um abraço e até mais…

Comentário:





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

Subscribe without commenting

topo