Arrumando o CSS no Internet Explorer

Postado dia 30 de Agosto de 2007 | Categorias: Fotos e Coisas, Utilidade Publica. NOT!

Você já deve estar acostumado a se deparar com problemas na formatação do seu site pelo fato do Internet Explorer não entender nada do que você fez no CSS. Tudo funciona bem no Firefox mas o IE entende tudo errado. A seguir, algumas dicas básicas para resolver esses problemas.

.

.

.

.

A <!–[if IE]> tag

Problema: Vários atributos “sizes”, “margins” e “padding” são exibidos diferentes no internet Explorer, esse pedaço de código pode lhe ajudar a resolver esses problemas.

Adicione esse código com as medidas desejadas abaixo da tag <style>, por exemplo :

<!–[if IE]>
<style>
.item {
margin: 5px;
padding: 10px;
}
</style>
<![EndIf]–>

Essas opções só serão vistas quando sua página for carregada no Internet Explorer. Eu recomendo o uso desses ajustes apenas para as áreas que não são compatíveis com o IE, e não necessariamente o CSS inteiro.

Erro na altura mínima

Problema: Quando tento criar uma DIV e altura não será abaixo de 12px o layout fica torto.

Simplesmente adicione o seguinte atributo a tag DIV:

{line-height: 0px;}

Se isso não funcionar, tente colocar o atributo da altura da linha dentro da tag <p>, com o <div> no final. O resultado será o seguinte:
<div style=”line-height: 0px; height: 5px;”></div>

<div style=”height: 5px;”><p style=”line-height: 0px;”></p></div>

As margens parecem maiores no Internet Explorer

Problema: Quando eu ajusto o atributo “margin” para todo o CSS no Internet Explorer aparece com o dobro do tamanho ou com valores adicionais. O que estraga todo meu layout.

Simplesmente use o atributo {display: inline;} dentro da tag que estão as opções da margem. Veja um exemplo:

<div style=”display: inline; margin-left: 5px;”></div>

—————————————————-

Esses são os problemas mais comuns quando o assunto é CSS no internet Explorer. E é por isso que sempre recomendo o Firefox, , o navegador que é o melhor amigo dos internautas! :p

[tags] Internet Explorer, Firefox, Dicas de CSS, [/tags]

Mais alguma coisa? Pesquise nos arquivos.

Referências Recomendadas! =D

  • Quer ganhar dinheiro com blogs?

Gostou desse post? o.o

Se gostou, assine o feed e seja avisado sempre que novos posts forem publicados! (o que é feed?)
Ou se preferir, receba os posts direto no seu email!

Se não gostou, entre em contato e sugira uma pauta.

22 Trilhões de comentários! LOL

  1. Rick
    30 de Agosto de 2007 as 7:48 pm:
    Excelente dica!
    É bom sempre achar soluções para esses problemas, afinal o IE ainda é o mais usado, então o site/blog tem que abrir bem nele também.
  2. Cyn Cardoso
    31 de Agosto de 2007 as 4:52 am:
    Ola! Adorei essas dicas de css! Usarei com certeza no meu novo site mais pra frente.
    Beijos!
  3. Edinei
    31 de Agosto de 2007 as 9:50 am:
    Opa adorei as dicas deste blog pena eu não ter achado ele antes !!!

    Mas ja está nos favoritos voltarei aqui muito obrigado !!

  4. Hebertphp
    31 de Agosto de 2007 as 3:05 pm:
    Cara, dicas extremamente proveitosas….

    Afinal, quem hoje não tem problemas de formatação com o Internet Explorer???

    Com certeza vou colocar um post sobre essas dicas e claro colocar os devidos créditos.

  5. Luma Kimura
    31 de Agosto de 2007 as 10:36 pm:
    Nossa, problemas de adaptação com o IEca (!) são mesmo o ó!! Faço o possível e o impossível para não recorrer a hacks, mas as vezes não dá, né? Hehehe…
  6. Notivagos
    3 de Setembro de 2007 as 10:32 am:
    falando em IE o teu menu superior e o conteudo do blog ficam a uns 100 e poucos pxs a esquerda no IE 6!!
  7. Notivagos
    3 de Setembro de 2007 as 11:29 am:
    A uns dias fiz um formulário de contato e tava testando no IE e já aproveitei e
    dei uma surfada pelos top blogueiros do blogblogs, é impressionante a quantidade de blog que da erro no IE e vezes ate trava, … infelizmente o IE ainda é usado pela maioria principalmente iniciantes!!!,
    e quem sabe não estão perdendo leitores!!!
  8. Prof.Luís Eduardo
    4 de Setembro de 2007 as 3:18 pm:
    Outra dica é usar a opção Strict no doctype. Falei grego? Tá, inclua este código no início da página:

    Veja http://www.maujor.com.

  9. Prof.Luís Eduardo
    4 de Setembro de 2007 as 3:20 pm:
    Código html não vai….
    Tudo bem, o site do maujor tem dicas ainda mais detalhadas para quem sofre com o IE6 e etc.
  10. Dario B F
    5 de Setembro de 2007 as 1:54 pm:
    Ironia do destino à parte, estou usando Firefox para visualizar teu blog e está dando um pau pra lá de estranho.
    A barra de rolagem horizontal está aparecendo e dá pra rolar uns 2000 pixeis pra fora do seu conteúdo.
    Próximo post: Arrumando o CSS no FF?
  11. David
    12 de Setembro de 2007 as 9:57 am:
    Cara, a barra lateral direita do meu blog do blogspot simplesmente desaparece no internet explorer! Atualizei para o internet explorer 7, mas mesmo assim o defeito persiste. Se puder enviar alguma dica, ficaria grandemente agradecido.
  12. André
    5 de Outubro de 2007 as 2:48 pm:
    Valeu pelas dicas tô começando a estudar css e essas dicas me ajudaram muito, valeu até assinar o feed
  13. Daniel Serrado
    6 de Novembro de 2007 as 11:09 am:
    Muito bom mesmo suas dicas, porem se analisarmos o mercado 80% dos navegadores são IE das mais variadas versões, agora como podemos criar websites pensando em firefox ,opera ou mesmo em IE sendo que existe uma grande vantagem por parte de uma delas, sera que não precisaremos dar enfase em todas e não recomendar uma ou outra, seremos assim tão extremistas em escolher a forma como é melhor se trabalhar sendo que nosso trabalho so tem validade se nossos leitores ou usuarios estiverem satisfeitos, sejam eles com qual navegador preferirem…..fica minha opinião pessoal e que fique claro que não estou defendendo nem um e nem outro so querendo nos profissionais de web se atente á esse detalhe.. Muito Obrigado.
  14. luciano mattar
    14 de Dezembro de 2007 as 7:21 pm:
    Cara, como eu aplico estas mudanças no html do blogspot? Não estou conseguindo adaptá-las. Até mais!
  15. Pafu
    20 de Janeiro de 2008 as 1:40 am:
    E quando o blog não tem um .css pois o link externo do .css fica off?
    O que eu faço!!?!?
  16. Anderssauro
    20 de Janeiro de 2008 as 2:51 am:
    Não entendi, como assim link do css?
  17. Pafu
    20 de Janeiro de 2008 as 3:09 am:
    Assim,no thema que utilizo,o .css fica hospedado num link externo.
    No caso eram esses:
    http://plantillasblogyweb2.googlepages.com/blogy-insense.css
    e
    http://plantillasblogyweb2.googlepages.com/estilos-blogger.css

    Mas eles ficaram off,agora estou sem .css
    Ao abrir pelo Internet Explorer fica tudo torto =(

  18. Anderssauro
    20 de Janeiro de 2008 as 4:27 am:
    O que você pode fazer é procurar esse mesmo tema do blog em outro lugar para baixar, e torcer para que já venha com o CSS ”embutido”.

    Se não conseguir é só trocar de tema, sei lá… Existem bilhares de temas legais para o blogger.

    Veja nesse blog, talvez ache algum interessante:
    http://templatesparanovoblogger.blogspot.com/

    abraço

  19. Anderssauro
    20 de Janeiro de 2008 as 4:30 am:
  20. hiaguinho
    17 de Março de 2008 as 9:41 pm:
    Muito bom mesmo suas dicas, porem se analisarmos o mercado 80% dos navegadores são IE das mais variadas versões, agora como podemos criar websites pensando em firefox ,opera ou mesmo em IE sendo que existe uma grande vantagem por parte de uma delas, sera que não precisaremos dar enfase em todas e não recomendar uma ou outra, seremos assim tão extremistas em escolher a forma como é melhor se trabalhar sendo que nosso trabalho so tem validade se nossos leitores ou usuarios estiverem satisfeitos, sejam eles com qual navegador preferirem…..fica minha opinião pessoal e que fique claro que não estou defendendo nem um e nem outro so querendo nos profissionais de web se atente á esse detalhe.. Muito Obrigado.
  21. Will
    31 de Maio de 2008 as 2:19 pm:
    Como fazer o css rodar igual no IE e no MOZILLA mm1 mm1 mm1
  22. claudia
    1 de Junho de 2008 as 7:15 pm:
    MEU BLOG É DE 3 COLUNAS, NO FIREFOX AS COLUNAS ESTÃO PERFEITAS, MAS NO EXPLORER A 3ª COLUNA ESTÁ DESALINHADA. PODE ME AJUDAR. GOSTARIA DE SABER O QUE POSSO FAZER PARA ALINHAR ESSA COLUNA.
    MEU BLOG É
    http://claudialucia2007.blogspot.com

    NO FIREFOX ESTÁ OK. O PROBLEMA É NO EXPLORER

Deixe seu comentário.

  • Escreva em português correto, por favor;
  • Não ofenda a mim nem aos outros leitores;
  • Seja coerente. Críticas ofensivas serão apagadas;
  • Não comente apenas smiles;
  • Não coloque sua URL no comentário, existe um lugar certo pra isso;
  • Por incrível que pareça, esse blog tem regras. Respeite-as.
  • Seu Deus não vai me castigar, ele está de férias;
  • Boa viagem! ;D

mm1 :H: :han: :dead: :der: loko :sifu: :emo: :medo: pp) :mimi: mm2 :fdp: .i. :isso: :gun: :gun2: :pisc: :qqq: :baba: =B mais...

« Quer Ingressos para o Guaraná Street Festival? E hoje é o Dia do Blog! - BlogDay 2007 »
page counter TwitterCounter for @anderssauro