Ser solidário (update)

Os utilizadores de Internet Explorer 5 e 6 terão reparado que o “selo” que pus no blog não funcionava como era suposto. Ou melhor, o IE não é capaz de ler correctamente os estilos CSS usados para fazer esse efeito. E, mais uma vez, obriga a um “work-around” que só serve para complicar.

Assim, o selo fica com várias versões possíveis, todas elas com código válido, mas com comportamento diferente de acordo com os browsers usados:

Versão 1:

selo fixo no canto superior direito da janela do browser, funciona em browsers modernos e inteligentes (exclui IE 5 e 6)
copiar e colar a seguir a <body>

<div id="selo" style="position:fixed; left:100%; top:0px;
height:100px; width:100px; margin:0 -100px -100px -100px; z-index:10000;">
<a href="http://www.apd.org.pt/" target="_blank" title="Este blog apoia
a Associação Portuguesa de Deficientes"><img
src="http://joaomartins.entropiadesign.org/wp-content/uploads/selos/apoio_apd.gif"
width="100" height="100" border="0" alt="Este blog apoia a Associação Portuguesa de Deficientes" /></a>
</div>

Versão 2:

selo fixo no canto superior direito da página (desaparece com o scroll), funciona em todos os browsers modernos e mesmo nos pouco inteligentes (inclui IE 5 e 6)
copiar e colar a seguir a <body>

<div id="selo" style="position:absolute; left:100%; top:0px;
height:100px; width:100px; margin:0 -100px -100px -100px; z-index:10000;">
<a href="http://www.apd.org.pt/" target="_blank" title="Este blog apoia
a Associação Portuguesa de Deficientes"><img
src="http://joaomartins.entropiadesign.org/wp-content/uploads/selos/apoio_apd.gif"
width="100" height="100" border="0" alt="Este blog apoia a Associação Portuguesa de Deficientes" /></a>
</div>

Versão 3 (a que está em uso neste site):

selo fixo no canto superior da janela do browsers modernos e inteligentes e no canto superior da página nos pouco inteligentes (inclui IE 5 e 6)
copiar e colar a seguir a <body>

<style type=”text/css”>
body>div.selo {position: fixed;}
div.selo{
margin: 0 -100px -100px -100px;
text-align: right;
position: absolute;
top: 0px;
left: 100%;
width: 100px;
right: 100px;
z-index:1000;
}
</style>
<div class="selo">
<a href="http://www.apd.org.pt/" target="_blank" title="Este blog apoia
a Associação Portuguesa de Deficientes"><img
src="http://joaomartins.entropiadesign.org/wp-content/uploads/selos/apoio_apd.gif"
width="100" height="100" border="0" alt="Este blog apoia a Associação Portuguesa de Deficientes" /></a>
</div>

Claro que os experts de CSS me dirão que há outras formas de resolver isto e que até há formas que servem para ter um comportamento uniforme em todas as plataformas, mas como não gosto de arriscar demasiado ficar com CSS inválido e acho que deve haver um mínimo de proporcionalidade entre o tempo que se perde e o ganho que se tem, fico-me por esta solução.

Depois de mais um bocado de volta destas trapalhadas do comportamento do CSS em IE, até dá vontade de sugerir que se usem estes selos colocando apenas a imagem num sítio do site ou blog como o topo da barra lateral ou assim. Essa solução, tão simples, passa apenas por colar no sítio onde se quer a imagem esta linhazita de código:

<a href="http://www.apd.org.pt/" target="_blank" title="Este blog apoia
a Associação Portuguesa de Deficientes"><img
src="http://joaomartins.entropiadesign.org/wp-content/uploads/selos/apoio_apd.gif"
width="100" height="100" border="0" alt="Este blog apoia a Associação Portuguesa de Deficientes" /></a>

3 pensamentos em “Ser solidário (update)

  1. A primeira versão deste artigo tinha uma gralha, entretanto corrigida.
    Os códigos disponibilizados devem funcionar como anunciado, agora. Mas não dou garantias nenhumas a ninguém. ;)

  2. @Vasco: se quiser fazer um outro selo ou propôr diferentes formas de apoiar esta associação, usando ou não o logótipo deles, cujo autor desconheço, acho que a APD agradece.
    Se o que acha “muito mau” é o meu código, sou eu que lhe agradeço sugestões de melhoria.
    Em geral, se quiser ser mais explícito e/ou mais construtivo, acho que lhe agradece toda a gente.
    Passe muito bem.

Deixar uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

Pode usar estas etiquetas HTML e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>