Se você está usando em seus estilos CSS o hack para IE7, cuidado, que seu site pode não ser bem visualizado no Safari.

Descobrimos, aqui na empresa, que o Safari interpreta o asterisco - mesmo que não acompanhado pela barra - como um comentário. Ou seja, os códigos abaixo são equivalentes para o browser do Mac:

#coluna { padding: 50px; *padding: 60px; background-color: red; } [...]
#coluna { padding: 50px; /*padding: 60px; background-color: red; } [...] */

Perceba que o Safari irá ignorar tudo, mas tudo mesmo, que vier depois do asterisco. Portanto o background-color não será aplicado, inclusive as demais regras que vierem no arquivo CSS.

A solução é repetir o hack novamente. Por exemplo:

#coluna { padding: 50px; *padding: 60px; *padding: 60px; background-color: red; } [...]

Dessa forma o Safari inicia o comentário no primeiro hack e finaliza ele no segundo.

E reclamam do Internet Explorer.

Um problema comum no Internet Explorer 6 é ele criar espaçamento que não existe entre um item e outro de uma lista. É comum ocorrer também em uma imagem, mas a solução essa é simples, como veremos adiante.

Espaço entre uma imagem e um bloco

Se você colocar uma tag img e logo abaixo um bloco p com alguma cor de fundo, perceberá uma linha em branco, separando a imagem do bloco - imagem 1.

Solução

A solução para o problema acima é simples. Ou você coloca um bloco - um div, por exemplo - em volta da tag img ou coloca a própria tag img como bloco, pelo CSS:

div.bloco img { display: block; }

Com isso, o espaço existente anteriormente passa a não existir mais - imagem 2. Isso só ocorre no IE6 ou anteriores. Na versão 7 o problema foi corrigido.

Imagem sem o display: block	Imagem com o display: block

Espaço entre itens de uma lista

As listas também costumam apresentar espaçamento entres seus itens. A solução é um parecida com a do espaçamento nas imagens.

Tem gente que coloca todos os itens da lista em uma única linha. Dessa forma o espaçamento não aparece, mas dependendo da quantidade de itens, essa saída pode-se mostrar um pouco confusa em uma futura manutenção do site.

O caso

Vamos primeiro ao código que mostra o espaçamento entre os itens da lista, no IE6.

Nosso CSS está simples. Setamos apenas um background na tag a e, quando o mouse passar por cima, mudamos a cor para verde.

ul { padding: 0; margin: 0; width: 250px; }
ul li { padding: 0; margin: 0; list-style-type: none; }
ul li a { display: block; background-color: black; color: white; padding: 10px; }
ul li a:hover { background-color: green; color: black; }

O código HTML também ficou simples. Uma lista com links - parecendo um menu.

<ul>
  <li><a href="#1">Item 1</a></li>
  <li><a href="#1">Item 2</a></li>
  <li><a href="#1">Item 3</a></li>
  <li><a href="#1">Item 4</a></li>
</ul>

O resultado

Com o código acima obtemos um bom resultado - imagem 1 - no Firefox e IE7. Mas um espaçamento entre os itens - imagem 2 - aparece no IE6:

Resultado no Firefox e Internet Explorer 7	Resultado no Internet Explorer 6

Solução 1: div entre o a

A solução para o problema acima é colocar um bloco dentro do li e trabalhar sempre com esse bloco. Ou seja, colocando um div entre as tags li o espaçamento irá sair.

Dessa forma, nosso código HTML fica da seguinte forma:

<ul>
  <li><div><a href="#1">Item 1</a></div></li>
  <li><div><a href="#1">Item 2</a></div></li>
  <li><div><a href="#1">Item 3</a></div></li>
  <li><div><a href="#1">Item 4</a></div></li>
</ul>

O CSS não precisa ser alterado nesse caso, mas se precisasse seria apenas mudança de cor, borda, espaçamento, ou qualquer atributo de aparência. Mas nada para corrigir o problema, que é solucionado apenas com o div por lá.

Solução 2: setar altura 100%
(adicionado em 26/07/2007 as 09h54)

Como sugerido pelo Renan Bernordi nos comentários, colocando uma altura 100% no elemento a, o espaçamento também irá sumir. Dessa forma, o div entre o a não será necessário e o CSS ficaria da seguinte forma:

ul { padding: 0; margin: 0; width: 250px; }
ul li { padding: 0; margin: 0; list-style-type: none; }
ul li a { display: block; background-color: black; color: white; padding: 10px; _height: 100%; }
ul li a:hover { background-color: green; color: black; }

Conclusão

Use Firefox!
No Maujor tem um texto que explica porque o problema acontece. É por causa de um tal hasLayout que só atrapalha em vez de ajudar. Viva o IE!

O Pageview (PV) é a quantidade de páginas vistas em um site. A cada página visitada em um site, por um determinado usuário, um novo PV é somado ao total, independente se aquele usuário já passou ou não pela página.

Durante muito tempo o PV é usado pelos anunciantes como base para definir quantidade de banners e exibições que irão colocar em um site. Quanto mais PV, mais os anunciantes se interessam pelo site.

Porém, a história está começando a mudar. Com a popularização do Ajax e outras técnicas em Javascript que permitem que determinadas partes do site sejam atualizados sem refresh - contando apenas um PV inicial - os donos de sites estão começando a se preocupar com os anunciantes. Qual será a reação deles ao ver que os PVs caíram em 50% após a atualização do site, utilizando os recursos de Ajax?

Uma matéria interessante no Webinsider fala do mesmo problema. E apresenta uma solução usada pela Nielsen/NetRatings: usar o tempo de permanência no site.

Parece mais seguro avaliar os sites pelo tempo de duração dos usuários no site, do que pelos PVs. Imagine um site com textos longos ou vídeos, como sugerido na matéria do Webinsider. O usuário permanecerá mais tempo na página, tendo uma possibilidade maior de ver o banner do anunciante.

Agora, em um site com pouco conteúdo, o usuário percorrerá dezenas de páginas em menos de um minuto e, provavelmente, não irá observar nenhum banner na página.

Resta agora os anunciantes entenderem esse novo princípio, que na minha opinião, deveria estar sendo usado a tempos.

Não tem como, será sempre - um pouco de exagero - preciso utilizar do hack no CSS para o template ficar correto no IE6, IE7 e Firefox. Quando o IE7 foi lançado, ficou-se um tempo pensando que não havia hack para ele. Bobagem, a Microsoft não consegue fazer nada sem algum problema, que acaba nos ajudando.

Hack CSS para IE6

Como muitos devem saber, o Firefox não tem hack para CSS. Portanto, você deve fazer funcionar primeiramente nele, e de tabela tentar fazer funcionar no IE7 - que tem renderização muito semelhante.

Depois, se falhar no IE6, utilize do famoso hack do underline na frente da propriedade:

#elemento {
  background-color: blue;
  _background-color: red; /* apenas para IE6 */
}

Hack CSS para IE7

Caso fique algum problema no template para o IE7, use o seguinte hack:

#elemento {
  background-color: blue;
  *background-color: red; /* altera propriedade do IE6 e IE7 */
  _background-color: blue; /* apenas IE6 */
}

Perceba acima que o hack para IE7 funciona também para o IE6, por isso uma última regra para reverter o efeito da propriedade do IE7.

CSS Browser Selector

O CSS Browser Selector é um javascript que coloca uma classe específica para cada tipo de navegador na tag html.

Dessa forma, quando você precisa de um hack CSS para o IE6, seu CSS ficaria parecido com isso:

.ie #elemento { color: blue; }
.ie7 #elemento { color: red; }

Você pode ver mais exemplos no próprio site do desenvolvedor.

Já usei uma vez esse script, mas acredito que dessa forma seja mais fácil voltarmos alguns anos atrás, onde existiam dois arquivos CSS - um para o Firefox e outro para o IE.

É bem interessante, mas eu ainda acho melhor usar o hack padrão dos browsers, ou ainda tentar re-estruturar o HTML ou CSS, do que usar o script, que, por pura preguiça, acabamos não tentando resolver o problema - que muitas vezes é simples - e partimos logo para uma regra nova no CSS.

Conclusão

Já consegui diversas vezes criar um template sem a utilização de hacks. Mas quando o template é um pouco mais elaborado, as vezes não compensa sair dos padrões de HTML e dificultar a acessibilidade para poder validar o CSS.

O que vale é o bom senso.

É sempre bom permitir aos usuários imprimir o conteúdo de seu site. Melhor ainda é permitir que eles imprimam e ainda economizem tinta e papel, removendo da impressão tudo o que não for referente ao conteúdo

Vendo um post no blog fechaTag, resolvi explicar como fazer um estilo CSS que será usado apenas na hora da impressão.

Idéia principal

A principal razão para se criar um estilo próprio para impressão é eliminar qualquer conteúdo que não seja útil para o usuário. Por exemplo, imagens, banners, logos, menus e qualquer outra parte do template que não faça parte do conteúdo principal.

Dessa forma, o usuário não correrá o risco de perder algumas páginas por causa do banner que passou do limite da página, do menu que é grande e que precisa de 2 páginas a mais que o conteúdo, nem gastar tanta tinta com o logo da empresa em 16 milhões de cores ou com o Google Adsense no meio do conteúdo - afinal, ele não poderá clicar.

Um exemplo padrão

Abaixo segue um exemplo de CSS para impressão. Pode-se perceber que o principal atributo a ser utilizado será o display:none para esconder tudo o que não presta:

/* elimina o topo do site - logo, banner, caixa de busca, etc... */
#topo { display:none; }

/* elimina a coluna da esquerda - menu, banner (mais!), parceiros, etc... */
#col-esquerda { display: none; }

/* elimina a coluna da direita - outro menu, mais banners, shopping, etc... */
#col-direita { display: none; }

/* elimina todas as publicidades */
#google-adsense, #mercado-livre, #shopping, #buscape, #links-uol { display: none; }

/* elimina qualquer imagem do texto */
img { display: none; }

/* exibe apenas as imagens que pertencem ao conteúdo */
div#conteudo img { display: inline; }

/* coloca todo o texto em preto */
div#conteudo * { color: black !important; }

/* coloca todos os links em azul */
div#conteudo a { color: blue !important; text-decoration: underline !important; }

Basicamente é isso, remover tudo o que estiver em volta do conteúdo, liberando apenas as imagens referentes a ele. É importante também colocar todo o texto em preto e os links em azul com sublinhado, que é um padrão que todos sabem referir-se a um link.

O !important serve para forçar a regra aos atributos, evitando que um estilo da outra folha CSS seja atribuído aos elementos.

Adicionando o CSS

Para fazer com que o CSS criado acima só seja acionado na hora da impressão, o parâmetro media deve ser print:

<link rel="stylesheet" type="text/css" href="style-impressao.css" media="print" />

Testando o CSS

Para testar seu CSS de impressão, você não precisa gastar dezenas de folhas e litros de tintas imprimindo cópia atrás de cópia. Abra seu site no Firefox e no menu File procure por Print Preview. Aí é só verificar se está tudo correto e melhorar alguns alinhamentos.

Assunto relacionado: Veja outros tipos de media do CSS