Soluções Para Problemas Comuns (e Chatos) de CSS

Quem já editou o CSS de algum tema do WordPress, ou mesmo de qualquer template html, sabe que às vezes se perde horas para resolver detalhes de posicionamento, cor etc.

Depois de quebrar a cabeça inúmeras vezes, acho que é hora de compartilhar um pouco do que aprendi.

Muitos dos problemas de exibição acontecem em função da maneira como diferentes navegadores "rendem" a página.

Antes de mais nada, o melhor mesmo é escolher um tema que funcione perfeitamente nos principais navegadores, leia-se Firefox, IE 6 e IE 7, direto "de fábrica".

Mas, e tem sempre um mas, às vezes o tema é exatamente aquilo que procuramos, e os detalhes a resolver pequenos.

O negócio, então, é por a mão na massa.

Imagens Pisca-Pisca (IE 6)

O título não diz muito, mas é difícil descrever o problema em poucas palavras.

Você já deve ter visto links em barras laterais decorados com imagens que, ao passarmos o mouse, somem e reaparecem. Esse problema é característico do Internet Explorer 6 e pode ser solucionado de uma forma muito simples.

Antes de mais nada, a causa:

O IE 6 recarrega as imagens com link como se fosse uma nova visita à página, por isso o "flickering".

Solução:

No CSS, remova a imagem de background do li a e li a:hover:

li a { color: #cor; background: url (images/imagem.gif); }

li a:hover { color: #cor; background: url (images/imagem.gif); }

Acrescente a imagem ao ul:

ul { list-style: none; list-style-image: url(images/imagem.gif); margin: 0; }

O problema deixa de acontecer porque a imagem passa a ser associada à lista de links, não ao link em si.

Claro que o código vai mudar de tema para tema, esses exemplos são apenas para ajudar na localização.

Imagens Pisca-Pisca 2 (IE 6)

Imagens grandes podem ser muito mais problemáticas na questão do pisca-pisca. Um logo que some e desaparece aumenta até o consumo de banda, já que vai ser recarregado várias vezes.

A solução é semelhante à anterior, talvez apenas um pouco mais difícil de localizar no CSS.

Se seu logo usa uma imagem como background, o código deve ser algo como:

a.logo { display: block; width: 400px; height: 90px; background: url(images/logo.gif) no-repeat; }

Observe se há um outro div que englobe esse, se não for o caso, crie um. O importante é que carregue as mesmas informações do link.

#logo { display: block; width: 400px; height: 90px; background: url(images/logo.gif) no-repeat; }

No header, vai ficar mais ou menos assim:

<div id="logo">

<a href="seublog.com"/><img src="seublog.com/images/logo.gif" class="logo"></a>

</div>

O que foi feito aqui?

A imagem continua associada ao link, já que ela substitui um texto. O que acontece é que, ao envolver o link em um div, sem link, com a mesma imagem de fundo, o problema desaparece, já que há uma imagem fixa no local.

Por que não usar um link comum com imagem?

Na questão do logo, que substitui informações como o nome do blog e descrição, é importante utilizar códigos que ajudem ao máximo no SEO da página. Dê uma lida nesse artigo, que mostra porque um método é melhor que outro.

Cores "Teimosas"

Às vezes você quer que as cores dos links dos títulos, por exemplo, sejam diferentes das cores dos outros links.

À princípio, é fácil mudar, já que a maioria dos temas traz uma tag para isso, geralmente h2 a. Você vai lá, muda e… nada. As cores continuam iguais.

Isso acontece porque o navegador aplica os seletores do CSS em ordem de importância e nem sempre essa é a ordem que você imagina.

No exemplo acima, o navegador está associando ao título as cores definidas em a e a:hover, responsáveis pelos links de modo geral. E ignora o h2 a.

Resolver é simples, localize ou crie você mesmo um código semelhante ao abaixo:

h2 a { color: #cor; text-decoration: none !important; }

h2 a:hover { color: #outra cor; text-decoration:none !important;}

Quando se acrescenta !important ao final do seletor, dizemos ao navegador que aquele código deve ser utilizado em primeiro lugar para aquela tag, no caso, h2 a.

Cada parâmetro que influenciar no caso deve receber o acréscimo, senão não funciona, ou funciona de maneira estranha.

Eu devo ter mais uma dúzia de dicas do tipo, mas encerro por aqui antes que esse post fique maior ainda.

Se você tiver alguma dúvida, use os comentários, no que puder, eu ajudarei.