CSS não funciona no FireFox

[marvi]

Olá pessoal,

Estou montando um site e fiz algunas tabelas principais, como a tabela mãe e tal configurada no CSS, tive uma dor de cabeça, mas conseguir fazer ele ler legal no Internet Explorer, só que no firefox ele não ler como eu quero... minha CSS é:

<style type="text/css">
<!--
* { margin: 0; padding: 0; }
body {background-image: url('imagens/topo.gif'); background-repeat: repeat-x; }
#conteudo { margin: 45 auto;  text-align: left; position: relative; min-height: 100%; height: auto; height: 80%; background-image: url('imagens/fundom.gif');}
#rodape {  width:100%; background-image: url('imagens/topo10.gif'); color:#fff;  bottom:0px; height: 55px; margin:0px; }
* HTML #rodape { margin-bottom:0px; bottom:-1px; }
rodape-conteudo { text-align:center; line-height: 35px;}
#frente { position:relative; margin: -25 auto;}
#demo-table {
  width: 730;
  height: 550;
border: 0px solid #f00; 
margin-left: auto;
margin-right: auto;

  }
-->
</style>

Para ver o meu site todo, tabela, div e etc, é só ver o html dele: http://www.ideiabiz.com/lab . Acesse também ele no Internet Explorer e depois no FireFox para ver a diferença, no firefox por exemplo não tem o topo da página correto, que é deixa a barra azul separada do plano de fundo cinza... Não tem também o núcleo do site, o meio em branco, em cima da barra azul no topo, só tem no rodapé e o plano de fundo cinza não vai até lá em baixo na barra do rodapé azul...

Como resolver isso?

Obrigado mesmo!

Marcelo

Editado Novembro 15, 2008 por marvi

[marvi]

Pode deixar, resolvi!

Editado Novembro 15, 2008 por marvi

[Jonathan Queiroz]

Marvi, posta aí como você fez para resolver seu problema...

Pode ajudar outras pessoas !

[marvi]

Para resolver só fiz isso:

É só adicionar hacks nas folhas de estilo padrão:

#search {

margin: 10px 0 0 5px; /*todos os navegadores*/

*margin: 10px 0 0 5px; /* apenas para o IE*/

}

Veja que para o IE tem o * na frente...

Mas surgiu outro problema... quem poder me ajudar... é o seguinte:

Se vocês acessarem no FireFox o site que estou criando http://www.ideiabiz.com/lab1 verá que ao mudar a resolução para 800X600 o plano de fundo do meio (cor cinza) fica curto, não vai até o rodapé, ok? Se também você mudar a resolução para 1024 X 768 ele se encaixa certo... Mas, se você muda para uma resolução 1152 X 864, agora, o plano de fundo cinza do meio passa do rodapé azul...

Isso não acontece com o Internet Explorer, pois o IE se adequa, se ajusta, automáticamente em qualquer resolução, como resolver isso? Segue o CSS:

<!--
* { margin: 0; padding: 0; }
body {background-image: url('imagens/topo.gif'); background-repeat: repeat-x; }
#conteudo { margin: 45 auto; *margin: 45 auto; text-align: left; position: absolute; *position: relative; min-height: 100%; *min-height: 100%; height: auto; *height: auto; height: 138%; *height: 100%; background-image: url('imagens/fundom.gif');}
#rodape { width:100%; *width:100%; background-image: url('imagens/topo10.gif'); color:#fff;  bottom:0px; *bottom:0px; height: 71px; *height: 55px; margin:0px; *margin:0px; }
* HTML #rodape { margin-bottom:0px; bottom:-1px; }
rodape-conteudo { text-align:center; line-height: 40px; *text-align:center; *line-height: 35px;}
#frente { position:relative; margin: -25 auto; *position:relative; *margin: -25 auto;}
#demo-table {
  width: 730;
  height: 550;
border: 0px solid #f00; 
margin-left: auto;
margin-right: auto;

  }
-->

Editado Novembro 15, 2008 por marvi

[marvi]

Mais problemas!!!

Mais problemas... baixei o FireFox Mozilla Firefox 3.0.4 e ele não roda certo mesmo! Voltei a estaca zero! E agora, alguém pode me ajudar??

Usem o Mozilla Firefox 3.0.4 e veja a diferença dele com Internet Explorer.

Editado Novembro 15, 2008 por marvi

[Jonathan Queiroz]

Cara, o site aqui está offline...

Não dá pra testar...

Ao invés de utilizar esse tipo de Hack CSS para o IE, utilize o "if IE".

Dá uma pesquisada aqui no fórum, você deve achar alguma coisa...Esse código é utilizado para colocar um código que só irá rodar no navegador Internet Explorer

Qualquer coisa, posta aí !

[marvi]

Já fiz if e tal e dava uns erros, resolvir de novo, mas acho que só serve para ler na versão nova do firefox que é o 3.0.4...

Fiz: position: relative;

Mas surgiu outro problema também.... acesse: http://www.ideiabiz.com/lab1 o site está no ar sim, ou senão, http://www.ideiabiz.com/lab1/index.htm para ver se vai e verá que a barra vertical branca no meio do site, onde tem o conteudo, deveria ter o seu topo na frente da barra azul no topo, assim como é pelo Internet explorer...

[marvi]

Acho que resolvi!

Ler tanto no Internet Explorer como no Fire Fox e com todas resoluções!

Se aparecer algum bug eu posto aqui de novo! Espero que não!

CSS ok:

<!--
* { margin: 0; padding: 0; }
body {background-image: url('imagens/topo.gif'); background-repeat: repeat-x; }
#conteudo {  width:100%; *width:100%; margin: 45 auto; *margin: 45 auto; text-align: left; position: absolute; *position: absolute; min-height: 100%; *min-height: 100%;  background-image: url('imagens/fundom.gif');}
#rodape { height: auto; *height: auto; height: 138%; *height: 100%; width:100%; *width:100%; background-image: url('imagens/topo10.gif'); color:#fff;  bottom:0px; *bottom:0px; height: 71px; *height: 55px; margin:0px; *margin:0px; }
* HTML #rodape { margin-bottom:0px; bottom:-1px; }
rodape-conteudo { text-align:center; line-height: 40px; *text-align:center; *line-height: 35px;}
#frente { position:relative; margin: -25 auto; *position:relative; *margin: -25 auto;}
#demo-table {
  width: 730;
  height: 550;
border: 0px solid #f00; 
margin-left: auto;
margin-right: auto;

  }
-->

Obrigado!