Jump to content


Photo

Altura 100% Bugada No Firefox


  • Faça o login para participar
15 replies to this topic

#1 :RB:

:RB:

    Novato no fórum

  • Usuários
  • 5 posts
  • Sexo:Não informado

Posted 30/07/2008, 11:58

Fala galera, seguinte.. to com problema pra colocar uma div q abriga todo o conteudo da pagina em 100% de altura no FIREFOX. No IE funciona tranquilo.

Já coloquei height: 100% no html, no body e na div.. já fiz vários testes mas não consegui resolver de jeito nenhum, to quebrando a cabeça a dias.

Bom segue a pagina pra vocês verem oq acontece.

http://www.knowhowrj.com.br/home.html
http://www.knowhowrj.com.br/site2.css

Obrigado desde já.

Edição feita por: :RB:, 30/07/2008, 11:59.


#2 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 30/07/2008, 12:35

Bem-vindo ao fórum!

RB, sempre antes de postar faça uma busca no fórum. Já existem vários tópicos com este assunto.

Além disso, te recomendo também ler as regras do fórum, para tirar um proveito melhor da comunidade ;)

Abraços
BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#3 :RB:

:RB:

    Novato no fórum

  • Usuários
  • 5 posts
  • Sexo:Não informado

Posted 30/07/2008, 13:15

Bem-vindo ao fórum!

RB, sempre antes de postar faça uma busca no fórum. Já existem vários tópicos com este assunto.

Além disso, te recomendo também ler as regras do fórum, para tirar um proveito melhor da comunidade ;)

Abraços


Fala Firehalk. Obrigado pela boas vindas.
Antes fiz uma busca mas não encotrei muita coisa, talvez esteja procurando tags errada. Pode me dizer algumas tags que podem me ajudar a achar estes topicos?

Obrigado.

#4 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 30/07/2008, 13:28

Eu postei um link no meu post, clicando nas palavras "busca no fórum" deve abrir a pesquisa que eu fiz e te passei. Talvez não tenha funcionado :huh:

Eu procurei por: altura 100%

Dentro aqui da seção de CSS & Semântica (Tableless).

Qualquer coisa é só retornar ;)

Edição feita por: Firehalk, 30/07/2008, 13:28.

BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#5 '' sem.Ponto

'' sem.Ponto

    Super Veterano

  • Ex-Admins
  • 2098 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 31/07/2008, 02:44

Na verdade o problema não está bem relacionado com o height 100%. Essa parte está corretíssima... sendo assim, eu vou responder. ^_^

O problema é que você usou float left na div #topo e #conteudo. O que ocorre é que quando você usa float na div filho, a div pai não acompanha o conteúdo. Para que a div pai acompanhe o conteúdo que está dentro dela, é preciso colocar display table.

Então coloque display table na div #site e me manda um presente de agradecimento. :D

#site { display: table; width: 760px; margin: 0 auto; height: 100%; padding:0px 7px 0 7px; background:#FFFFFF; }

(ok2)
att,
Muller Dias
ex-administrador Fórum WMO

#6 :RB:

:RB:

    Novato no fórum

  • Usuários
  • 5 posts
  • Sexo:Não informado

Posted 31/07/2008, 08:32

Na verdade o problema não está bem relacionado com o height 100%. Essa parte está corretíssima... sendo assim, eu vou responder. ^_^

O problema é que você usou float left na div #topo e #conteudo. O que ocorre é que quando você usa float na div filho, a div pai não acompanha o conteúdo. Para que a div pai acompanhe o conteúdo que está dentro dela, é preciso colocar display table.

Então coloque display table na div #site e me manda um presente de agradecimento. :D

#site { display: table; width: 760px; margin: 0 auto; height: 100%; padding:0px 7px 0 7px; background:#FFFFFF; }

(ok2)

Caramba, muitissimo obrigado pela ajuda irmao, se tu fosse mulher te até te chamava pra jantar haha.
Sério, brigado pela solução e pela explicação. Show!

Abraço. ;)

#7 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 31/07/2008, 08:42

Eu procuro evitar usar display:table o máximo, quando se tratam de elementos que usam float dentro dela.

Em primeiro momento é só alegria, mas depois de dias/semanas testando o site no Firefox, você percebe que de vez em quando o Firefox quebra os floats. É aleatório. Vezes acontece, vezes fica tudo legal.

Isso é um bug (podem até me dizer que não, mas visto ser algo esporádico, eu ainda prefiro chamar de bug... então é bug e ponto final :D) encontrado apenas no Firefox. Nos IEs, Opera, Safari, ainda não presenciei.

Enfim, eu não recomendaria usar display:table. Pode ser uma solução provisória, mas a longo prazo não vale a pena. Falo por experiência própria ;)
BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#8 :RB:

:RB:

    Novato no fórum

  • Usuários
  • 5 posts
  • Sexo:Não informado

Posted 31/07/2008, 08:52

Eu procuro evitar usar display:table o máximo, quando se tratam de elementos que usam float dentro dela.

Em primeiro momento é só alegria, mas depois de dias/semanas testando o site no Firefox, você percebe que de vez em quando o Firefox quebra os floats. É aleatório. Vezes acontece, vezes fica tudo legal.

Isso é um bug (podem até me dizer que não, mas visto ser algo esporádico, eu ainda prefiro chamar de bug... então é bug e ponto final :D) encontrado apenas no Firefox. Nos IEs, Opera, Safari, ainda não presenciei.

Enfim, eu não recomendaria usar display:table. Pode ser uma solução provisória, mas a longo prazo não vale a pena. Falo por experiência própria ;)

Entendi. E o que você aconselha como solução final?

#9 '' sem.Ponto

'' sem.Ponto

    Super Veterano

  • Ex-Admins
  • 2098 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 31/07/2008, 12:25

Firehalk, se você colocar clear: both no elemento que vem depois da Div corrige o problema, não? :ponder:

Eu até expliquei no outro tópico como fazer utilizando só CSS...
att,
Muller Dias
ex-administrador Fórum WMO

#10 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 31/07/2008, 12:59

Eu tinha criado um tópico sobre isso um tempo atrás.

Mas no meu caso era uma div ao lado da outra (3 por linha), com float em todas elas. Em função da situação, eu não podia usar clear:both (visto que queria que elas continuassem na mesma linha, 3 em 3). Sempre que eu usasse display:table, bugava.

Inclusive o Alex tinha postado um outro método de resolver isso (uma propriedade lá que só o FF entendia), e mesmo assim, não rolou.

Com relação ao código dele, eu não cheguei a analisar com calma, mas por cima já vi que usa muito float pra cá e pra lá. No caso desses elementos que usem float, ficarem um ao lado do outro, então display:table não é viável, pois vai quebrar o layout no FF certas vezes.

Caso não for este o caso, não custa tentar, mas aí não sei que outro rolo que pode ter. :wacko:
BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#11 '' sem.Ponto

'' sem.Ponto

    Super Veterano

  • Ex-Admins
  • 2098 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 31/07/2008, 14:44

:ponder:

Eu criei as 3 colunas lado a lado com float sem usar display table no elemento pai. Até gostei do resultado... ^_^

Coloquei clear: both no elemento que vem logo após as colunas. Segue o arquivo para você ver como eu fiz, Firehalk: Attached File  3colunas_float_clear_both.html   1.17KB   11 downloads

Será o melhor modo? Creio que assim não tem perigo de quebrar... :ponder:

Dê uma olhada aí me diga o que você acha. ^_^
att,
Muller Dias
ex-administrador Fórum WMO

#12 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 31/07/2008, 14:58

Eu tenho quase certeza que assim não tem rolo :)

O problema (que eu conheço) é só entre display:table e float mesmo.

O float em si não tem problema nenhum... agora, quando o casal aquele ali se junta é que de vez em quando rola um problema aqui e ali. :P
BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#13 '' sem.Ponto

'' sem.Ponto

    Super Veterano

  • Ex-Admins
  • 2098 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 31/07/2008, 15:06

Valeu Firehalk! Então é bom eu começar a usar o clear: both invés do display: table. ^_^

RB,

Retire o display: table que eu recomendei para você colocar na div #site e tenta colocar o seguinte no seu CSS:

#site:after {
	content:".";
	display:block;
	clear:both;
	visibility:hidden;
	height:0;
	overflow:hidden;
}

Nos diga se resolve... :ponder:
att,
Muller Dias
ex-administrador Fórum WMO

#14 :RB:

:RB:

    Novato no fórum

  • Usuários
  • 5 posts
  • Sexo:Não informado

Posted 31/07/2008, 15:41

Valeu Firehalk! Então é bom eu começar a usar o clear: both invés do display: table. ^_^

RB,

Retire o display: table que eu recomendei para você colocar na div #site e tenta colocar o seguinte no seu CSS:

#site:after {
	content:".";
	display:block;
	clear:both;
	visibility:hidden;
	height:0;
	overflow:hidden;
}

Nos diga se resolve... :ponder:

To só acompanhando a discussão.
Então cara.. não funcionou nao, o #site ficou largo e não foi até o final.

Se quiser posto printscreen. ;)

Edição feita por: :RB:, 31/07/2008, 15:41.


#15 '' sem.Ponto

'' sem.Ponto

    Super Veterano

  • Ex-Admins
  • 2098 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte

Posted 31/07/2008, 16:10

A estrutura do site ficou um pouco confusa, então me responda duas perguntas... tem algum outro elemento depois da div #conteudo? Os únicos elementos filhos da div #site são somente div #topo e div #conteudo?

Firehalk, dê uma olhada aí...

Se o #topo e #conteudo forem os únicos elementos filhos da div #site, acho que não tem problema em usar display: table no #site, pois essas duas divs filhas não serão exibidas lado a lado. :ponder:
att,
Muller Dias
ex-administrador Fórum WMO




2 user(s) are reading this topic

0 membro(s), 2 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq