Diagramar CSS é uma coisa muito gostosa (pense o que quiser), mas o que mais nos faz passar raiva nessa atividade é a compatibilidade entre browsers. Como fazer para que o meu código CSS seja compatível com diversos browsers.
Como a Microsoft já anunciou que não vai seguir os padrões W3C, e quase todos os clientes do mundo não vão tomar vergonha na cara e migrar pra algo melhor, o jeito é ficar fazendo xunxos.
Aurélio propôem uma solução muito bacana e inteligente, que é separar as classes mediante a identificação do browser via JavaScript:
Coloque no head como javascript:
if( navigator.appName.indexOf("Microsoft") > -1 ){ document.body.className = "msie"; }
E separe as classes da seguinte forma:
#logo{ background-image: url("florTop.jpg"); display: block; width: 127px; height: 159px; float: left; text-decoration: none; margin-top: -120px; } .msie #logo{ margin-top: -119px; }
Uma outra solução é esconder o conteúdo do Internet Explorer, o que pode ser feito atribuindo a definição html>body a qualquer estilo, o que não precisa do cógido JavaScript, e que tomando o mesmo exemplo fica da seguinte forma:
#logo{ background-image: url("florTop.jpg"); display: block; width: 127px; height: 159px; float: left; text-decoration: none; margin-top: -119px; } html>body #logo{ margin-top: -120px; }
Note que o item de interesse (margin-top) teve de ser invertido nesse método.
