Problema de incompatibilidade com CSS entre os navegadores

newboxters · Outubro 12, 2005

Olá! Essas últimas semanas eu venho me dedicando ao CSS para aplicar em meu site. Estou lendo tutoriais, dicas, acessando áreas de css no fórum, etc.Porém, encontrei um problema de incompatibilidade, ao fazer um menu.No Internet Explorer funcionou perfeitamente, mas no FireFox, a medida da largura parece que aumentou e fica um espaço entre os títulos das seções. Vejam o código completo que utilizei:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId" content="FrontPage.Editor.Document"><title>MaxCL :: Menu</title><style> #navcontainer { width: 153px; }#navcontainer ul{margin-right: 0;margin-left: 0;margin-bottom: 0;margin-top: 0;PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px;list-style-type: none;font-family: Verdana, Arial, Helvetica, sans-serif;FONT-SIZE: 10px;}#navcontainer a{display: block;width: 153px;background-color: #C0C0C0;PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; BORDER-BOTTOM: #000000 1px solid;BORDER-LEFT: #000000 1px solid;BORDER-RIGHT: #000000 1px solid;}#navcontainer a:link, #navlist a:visited{color: #FF0000;text-decoration: none;TEXT-ALIGN: left}#navcontainer a:hover{background-color: #CCCCFF;color: #000000; FONT-WEIGHT: bold} #title { width: 153px; }#title ul{margin-right: 0;margin-left: 0;margin-bottom: 0;margin-top: 0;PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px;list-style-type: none;font-family: Verdana, Arial, Helvetica, sans-serif;FONT-SIZE: 12px;color: #FFFFFF;text-decoration: none;font-weight:bold;TEXT-ALIGN: center}#title p{display: block;width: 153px;background-color: #000000;PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; BORDER-TOP: #FF0000 1px solid;BORDER-BOTTOM: #FF0000 1px solid;BORDER-LEFT: #FF0000 1px solid;BORDER-RIGHT: #FF0000 1px solid;}</style></head><body topmargin="0" leftmargin="0"><div id="title"><ul id="titlelist"><p>Título da Seção</p></ul></div><div id="navcontainer"><ul id="navlist"> <a href="http1" title="link title1"><font color="#000000"><b>text1</b></font></a> <a href="http2" title="link title2"> text2</a> <a href="http3" title="link title3"> text3</a> <a href="http4" title="link title4"> text4</a> <a href="http5" title="link title5"><b><font color="#000000">text5</font></b></a> <a href="http5" title="link title5"> text5</a> <a href="http5" title="link title5"> text5</a></ul></div><div id="title"><ul id="titlelist"><p>Título da Seção</p></ul></div><div id="navcontainer" style="width: 153; height: 20"><ul id="navlist"> <a href="http5" title="link title5"> text5</a> <a href="http5" title="link title5"> text5</a> <a href="http5" title="link title5"> text5</a> <p style="margin-top: 0; margin-bottom: 0"></ul></div></body></html>

Visualizem esse código no firefox só para ver exatamente o meu problema.Alguém saberia como posso resolver isto?Obrigado.

titodj · Outubro 13, 2005

olha não chegui a colocar teu codigo no FF, mas o FF não reconhece o padding: ele v como margin: tipow

isso ele v como margin,

PADDING-RIGHT: 2px;

PADDING-LEFT: 2px;

PADDING-BOTTOM: 4px;

PADDING-TOP: 4px;

talves ae esteja o problema...

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Illidan · Outubro 13, 2005

olha não chegui a colocar teu codigo no FF, mas o FF não reconhece o padding: ele v como margin

Reconhece, sim, cara... o fato é que ele interpreta diferentemente do IE. No FF, a dimensão final da caixa é o width + padding. No IE, é somente o width... o padding é aplicado "internamente" a essa largura, mantendo a que você especificou como largura final da caixa.

Embora eu odeie o IE, nesse caso, particularmente, eu prefiro o modelo dele... acho mais útil e menos confuso do que o proposto pela W3C. Mas, enfim...

[]'s!

pa_bruno · Outubro 13, 2005

falae Illidan. Bom, sobre sua opinião de preferir como o i.e. faz a interpretação do padding. bom, seguinte, ele é mais "simples" de se entender digamos assim, mas é o modo incorreto. Te explico o por quê:

você tem um box com 150px por exemplo. Supondo que você coloque 10px de padding na esquerda e na direita. O i.e. diminui os 10px da esq e da dir do tamanho total, ficando o box com 130px + 10px da esq + 10px da dir... Até ae beleza, quem sempre trabalha e trabalhou com i.e. fica mais tranks... Mas concorda comigo que você naum pediu que fosse diminuído? você quer 150px de largura e naum 130px... entaum pq o i.e. vai faze isso? http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

o FF, opera, etc, fazem o correto, que é ACRESCENTAR e naum DIMINUIR, pois o padding é um acréscimo... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Portanto, sempre que forem criar um box com padding, pense sempre no esque a seguir:

tamanhoBox = padDireita + tamanhoUtil + padEsquera

Ex:

tamanhoBox(150px) = padDireita(10px) + tamanhoUtil(130px) + padEsquera(10px)

concorda comigo? http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

bom, espero ter esclarecido... É um bom tema pra um artigo também... :D

Illidan · Outubro 13, 2005

Falae Bruno! Valeu pela explicação... :)

Eu sabia desse lance. Mas eu acho que é uma questão de opinião dizer qual dos dois é o mais correto, sabe... eu acho que quando você pensa na largura de um objeto, você está pensando na distância de uma extremidade a outra. Não na área útil interna desse objeto... pelo menos eu acho mais intuitivo o modelo do IE.

Por exemplo, da mesma forma que você não pediu que o espaço interna da caixa fosse diminuída no IE, você tb não pediu que a área externa fosse aumentada. Pelo menos, não explicitamente... sempre achei esquisito você definir um width de 150px e ter que ficar somando os paddings laterais a isso. hehehe, mas beleza... acho que, como eu disse no início, é só uma questão de opinião... :D

[]'s!

pa_bruno · Outubro 13, 2005

falae Illidan... trankilo... cada com sua opinião... ;)

mas ainda acho o do i.e. errado... você disse q naum pediu para ser aumentado o tamanho total, mas a forma correta de implementação dos paddings é que seja aumentado cada vez que uma largura e um padding eh setado... pois o padding eh um adicional... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif mas o i.e. interpreta da maneira errada...

mas claro, cada um acha a forma mais facil a q ele mesmo achar... ;)

falow..

newboxters · Outubro 14, 2005

Ok. Agradeço a todos os comentários... eu já sabia, conhecia este "defeito" no IE, mas obrigado por confirmarem a minha dúvida. Mas o meu real problema é:

Haveria alguma maneira de eu adequar este style para ficar com a visualização perfeita, tanto no IE, como FF, Opera, entre outros?

Pois acessei vários sites (de qualidade) nos três principais navegadores que citei, e utilizando styles ficam de perfeita visualização em ambos. Porém, mesmo analisando o código, não consegui entender.

Caso alguém saiba, ficarei grato se puderem me explicar e se possível, mostrar um exemplo.

pa_bruno · Outubro 17, 2005

hacks... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

tem varios posts sobre isso, cada hack pra cada browser... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

newboxters · Outubro 20, 2005

hacks... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif tem varios posts sobre isso, cada hack pra cada browser... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Olá. Então, eu pesquisei um pouco sobre hack, mas (se possível) não teria como você me passar o endereço de tópicos que abordem de uma maneira de fácil entendimento e utilização sobre hacks.Fazendo uma busca, encontrei vários, mas o que achei mais interessante:http://forum.imasters.com.br/index.php?sho...=148065&hl=hackCaso seja possível, poderia me indicar algum link de um bom tutorial?Agradeço sua atenção.

Felds · Outubro 20, 2005

Na verdade ainda tem as bordas

Para um box de 150px de largura, com borda

width: 122px;padding: 10px;border: 4px solid black;

ou seja:

4 + 10 + 122 + 10 + 4

E uma magiquinha no IE6 (não sei se funciona com os mais antigos)

Se você declara o DOCTYPE, ele sai do quirks mode e entende o BOX MODEL!! http://forum.imasters.com.br/public/style_emoticons/default/grin.gif http://forum.imasters.com.br/public/style_emoticons/default/grin.gif http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

e funciona parecido com um browser decente!

Guduraku!

pa_bruno · Outubro 20, 2005

mas o problema continua se você colocaro prólogo XML http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Felds · Outubro 20, 2005

Ixi! sério mesmo!?Eu sempre uso HTML 4.01 Strict.Com ele funciona legal.

pa_bruno · Outubro 20, 2005

mascom o prólogo XML ou naum? eu naum uso mais html naum... uso xhtml

newboxters · Outubro 22, 2005

Então pessoal, eu já fiz umas buscas aqui, já li os últimos posts que fizeram, mas ainda não consegui resolver meu problema de incompatibilidade entre os navegadores.

Alguém poderia, por favor, me mostrar um exemplo de como se faz um hack, para eu ir testando e alterando os valores até funcionar sem problemas?

Ou poderiam me indicar alguns tutoriais ou posts que falam de forma clara sobre o assunto.

Obrigado.

Obs.: Já tentei utilizar um cód. de hacks que eu encontrei, mas acho que não deve ser aquilo pois não funcionou, e dependendo onde coloco, até perde as configurações do CSS.

pa_bruno · Outubro 24, 2005

Bom, hacks pro FF, opera, utilize:

html>body #nomeDoDiv {conteúdo, atributos e valores}

somente o FF, opera, etc, irão reconhecer... O i.e. naum

Para o i.e. tem o:

* html #nomeDoDiv {conteúdo, atributos e valores}

Somente o i.e. reconhece...

Mas com o surgimento do i.e. 7, os desenvolvedores da MS estão recomendando e pedindo pros desenvolvedores que colocam hacks pro i.e., utilizem o Conditional Comments:

<!--[if IE lt 7]><link rel="stylesheet" type="text/css" href="estilo_ie.css" /><![endif]-->

Desse modo, somente o i.e. reconhecerá o carregamento do estilo, enquanto os otros navegadores reconhecerão como um comentário.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Arquivado

Problema de incompatibilidade com CSS entre os navegadores

Recommended Posts

newboxters 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

titodj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Illidan 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pa_bruno 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Illidan 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pa_bruno 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

newboxters 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pa_bruno 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

newboxters 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Felds 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pa_bruno 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Felds 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pa_bruno 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

newboxters 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pa_bruno 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

lendo RSS com PHP mostrando a imagem de preview

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

Fóruns

Tempo Real

Informação importante