Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

gustavosl

problema com padding e margin no FireFox

Por , em Desenvolvimento frontend

Recommended Posts

gustavosl    0

gustavosl
Postado

Olá pessoal, estou com um problema de CSS no FireFox.Por exemplo:HTML

   <html>   <head>   </head>      <body>         <div id=geral>            <div id=topo>            </div>            <div id=menu>            </div>         </div>      </body>    </html>

CSS

#geral {   width: 750px;   }    #topo {   width: 750px;   padding: 10px;}#menu {   width: 750px;}

No IE funciona normalmente, mas no Fire Fox a DIV topo vai ficar com se tivesse 760px...Porque isto acontece oque estou fazendo de errado?

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Imagem Postada

 

O padding, ainda é entendido "dentro da div"... se você especificou um tamanho exato para a div, ela naturalmente vai alargar se você aumentar o padding...

 

Mas se você quer dar um espaço por fora da div, tem que usar margin...

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Amigo gustavosl, pela sua lógica você deveria de diminuir o width do div Topo para um valor de 730px; derivado à padding da esquerda que é 10px mais o padding da direita que é 10px também, logo teria que reduzir 20px do width.

 

Cumps [*]

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Mas aqui vai uma dica que resolveu um problema que tinha antes de conhecer as webstandards e que me deixava de cabelo em pé... Pq mtas vezes o IE6 renderizava isso de uma forma e o FF de outra... Mas pq?

 

Bom, para resolver isso, declare um Doctype para sua página... Simples não? Bom, dessa forma, pelo menos comigo sempre funcionou, os browsers passaram a renderizar 99% dos comandos de maneira bem similar (digamos, quase igual)...

 

Faça um teste...

 

Mas msm aplicando o Doctype, você tem que aprender a fazer os cálculos de área... Outro exemplo de imagem identificando cada "área":

Imagem Postada

Para entender melhor ainda, vms fazer uma "simulação": criaremos uma div que no final, fique com uma largura de no máximo, 764px e uma altura de 136px, aplicando uma borda de 5px, um padding de 15px em ambos os lados, um margin de 15px dos lados esquerdo e direito e de 10px em cima e embaixo...

 

Vms começar com a formatação da largura, definindo nosso margin, já que ele é o elemento externo... dos 764px totais, retiro 30px (referentes aos 15 do lado esquerdo e mais 15 do lado direito). Me "sobram" 734px. Agora, o border: retiro mais 10px (referentes aos 5px da borda aplicada no lado direito e no lado esquerdo). 734-10=724px. O padding: 724-30=694px (-30 pq aplicamos 15px do lado esquerdo e mais 15 do lado direito). Pronto! Agora, a altura, mesma coisa: margin -> 136-20=116px (10 em cima e 10 embaixo). border -> 116-10=106px (5 em cima e 5 embaixo). padding -> 106-30=76px (15 em cima e 15 embaixo). Pronto! Já temos a formatação da nossa div! Ela ficará assim:

#nossa_div {	width: 694px;	height: 76px;	padding: 15px;	border: 5px solid #f00;	margin: 10px 15px;}
Bom, espero que isso ajude tb... Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

gustavosl    0

gustavosl
Postado

O DOCTYPE resolveu o problema....O Calculo de área eu já sabia, mas o meu problema era que se eu diminuisse o width para colocar o padding, no iE ficava torto (menor) que outra DIV. Mas com DOCTYPE está ficando igual...... Funcionou que é uma beleza......Valeu e um abraço a todos! :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

claujohnson    0

claujohnson
Postado

Olá,

 

Estou com o mesmo problema, somo o padding ao total da DIV e faço a imagem do background no tamanho certinho para caber. Funciona direitinho no IE7, mas no IE6 diminui o tamanho da DIV e a imagem acaba ficando cortada

 

Só que no meu caso não funciona nem com DOCTYPE.

 

Eu sempre usei o DOCTYPE assim:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Tem algo errado com ele?

 

 

Valeu!

 

Clau Johnson

Compartilhar este post

Link para o post
Compartilhar em outros sites

claujohnson    0

claujohnson
Postado

Olá,

 

Experimente usar esta versão:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Cumps \o/

 

Ué, é a mesma versão que eu uso.. :unsure:

Mas beleza, eu já resolvi meu problema com Conditional Comments, é uma boa solução, faz-se uma css só com as declarações que precisam ser alteradas para funcionar nos IEs antigos. Funcionou 100%.

 

Para quem quiser se interar mais, tem um artigo muito bom do Henrique Costa Pereira, no Revolução Etc: http://revolucao.etc.br/archives/category/hacks/

 

Abraços!

 

Clau Johnson

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diogor    0

Diogor
Postado

Eu também tive problemas com isso, mas eu percebi que as divs pais devem ter mo mesmo tamanho da filhas.Por exemplo uma div "conteudo" contendo uma div "destaque". A div "destaque" com 8px de margin-botton, então a div "conteudo" tem que ter um padding-botton de 8px também, caso contrário voce teria um espaço em branco de 8px.Acho q eh mais ou menos isso... ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,Isso é derivado à propriedade clear: both. Jogue antes um float: left.Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites

yogodoshi    0

yogodoshi
Postado

vlw!obrigado pela ajuda!mas aqui fica outra duvida: com esse float nao corre o risco de estragar o layout já que eu não quero que essa div suba ou fique ao lado de nenhuma outra? Ou o clear both e o width 100% jah impossibilitam o float de agir?

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Isso não acontecerá porque a div rodapé não está dentro da div site.

 

Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito