Solução do teste seu conhecimento 8
Publicado em: 2008-04-13 — 13.021 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.
Parabens pelo blog muito bom msm!!
Excelente blog! Parabens!
Adorei seu blog amigo
Vou assinar o feed Gostaria que vc tbm desse uma passadinha no meu pra umas dicas
Obrigado
Mais isso só funciona com 2px… e se eu quiser usar 1px .. no IE não tem jeito nenhum?
[[]]
A. Felix
(…)
@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.
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.
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
@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.
lembrando que fiz 3 diferentes tipos de solução.. e uma sendo bizarra ;D
Minha versão, eu ja havia feito a tempos mas acabei esquecendo de mandar. Veja aqui
Minha solução foi exatamente essa, apenas algumas poucas diferenças.
Segue o link: Solução Capuski
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…