Problema CSS no Firefox.

[Renato Reis 7 0]

Galera, to com um problema aqui. Fiz um site, que busca uma quantidade de dados e gera uma tabela em PHP. O site teve algumas definicoes em CSS e ai esta o problema.

 

No chrome, esta 100%, sem problemas, sem bugs; no IE, funciona, mas a visualizacao é lixo; no firefox que eu queria que funcionasse ele da pau quando a tabela atinge +- 1500 linhas. Vou mostrar uns prints para voces verem e me ajudarem.

 

Ate aqui, tudo normal:

 

Comecando a embaralhar:

 

Bem embaralhado já:

 

Nao da pra ver mais nada:

 

 

Segue o código css para analise:

@charset "iso8859-1";
#topo{
background-image:url(images/img02.jpg);
border:none;
margin-top:0px;
width:100%;
position:fixed;
height:65px;
box-shadow: grey 0.2em 0.1em 0.2em;
}
#logo{
padding: 0px 0px 0px 20px;
letter-spacing: -1px;
text-transform: lowercase;
font-family: 'Dancing Script', cursive ;
font-size: 50px;
color:#731F1F;
float:left;
text-shadow: 0.01em 0.03em #FFF;
text-decoration: none;
display: inline-block;
}
#login
{
float:right;	
}
#logo a:hover, a:visited, a:active, a:link
{
text-decoration: none;
color:#731F1F;
}

#nome{
padding: 0px 0px 0px 20px;
letter-spacing: -1px;
#	text-transform: lowercase;
font-family: 'Dancing Script', cursive ;
font-size: 50px;
color:#731F1F;
float:left;
text-shadow: 0.01em 0.03em #FFF;

}
table{
#	background-color:#FC9;
#	border: 1px solid #03476F;
#	color:#FFF;	
}
td, th {
border: 1px dotted #000;
padding: .1em;
#	color: #363636;
 }
body tr:hover {
 background: #8B3A3A;
 border: 1px solid #03476F;
 color: #FFFFFF;
 }

#menu
{
width:auto;
}
#menu ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}

#menu li {
display: inline-block;
font-size: 18px;
font-weight: 600;
padding: 3px 40px;
}
#menu a {
#	display: block;
#	background: url(images/img10.png) no-repeat right 50%;
#	line-height: 52px;
text-decoration: none;
#	text-transform: lowercase;
#	text-align: center;
#	text-transform: uppercase;
font-size: 16px;
font-weight: 200;
color: #4C4C4C;
border: none;
}
#menu a:hover
{
text-decoration: none;
background-image:url(images/img01.jpg);
color:#FFF;
}

#principal{
background-image:url(images/img05.jpg);
background-repeat: repeat;
padding-top:65px;
text-align: center;
#	min-height:560px;
#	position:relative;
height:auto !important;
height:100%;
min-height:100%;
}
#rodape{
background-image:url(images/img01.jpg);
width:100%;
padding-bottom:6px;
height:10px;
font-size:80%;
font-weight:500;
color:#FFF;
position:fixed;
bottom:0px;
}
html, body {height:100%}
body {	
background-image: url(images/img05.jpg);
background-repeat: repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: 'Open Sans Condensed', sans-serif;
}
body,td,th {
font-family: "Open Sans Condensed", sans-serif;
}

 

 

Obrigado!

[Bergs 53]

por que a declaração do html e o body no final do código?

 

O valor do padding é assim mesmo por que não trabalha com pixel?

td, th {
       border: 1px dotted #000;
       padding: .1em;
#       color: #363636;
 }

 

use isso no inicio do código para zerar todos os elementos:

* {padding: 0; margin: 0;}

 

O doctype da sua página está validado?

 

Pode ser muita coisa....

 

Utilize fontes padrões para web como Arial, Verdana, etc...

font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Dancing Script', cursive ;

[Nícolas Luís Huber 14]

Teste as dicas dos parceiros de cima!

 

Sei que não faz parte da dúvida, mas acho por questão de usabilidade e performance, você não deveria gerar uma repetição tão grande da tabela, 1500 é muita coisa. Tente coloca uma paginação. Acho que em computadores mais antigos esse número de resultados é capaz de até travar o browser!

[Dian Carlos 29]

cara, poe uma paginação.. Eu ficaria entediado de fica rolando o scroll do meu mouse até achar um resultado que estivesse lá em baixo, na verdade, eu desistiria de ficar no site.

 

Um dica, poe uma paginação e limita da 100 a 200 resultados, assim a lista vai ficar muito mais organizada e não vai acontecer esse bug.

[Renato Reis 7 0]

por que a declaração do html e o body no final do código?

 

O valor do padding é assim mesmo por que não trabalha com pixel?

td, th {
       border: 1px dotted #000;
       padding: .1em;
#       color: #363636;
 }

 

use isso no inicio do código para zerar todos os elementos:

* {padding: 0; margin: 0;}

 

O doctype da sua página está validado?

 

Pode ser muita coisa....

 

Utilize fontes padrões para web como Arial, Verdana, etc...

font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Dancing Script', cursive ;

 

Bom dia amigo, valeu pela ajuda mas nao resolveu.

 

Se eu botar aquele codigo para zerar todos os elementos ele alinha a esquerda, compromentendo a visualizacao desejada. Quanto as fontes, nao sao o motivo tambem.

 

 

O problema é somente no firefox. No chrome e no IE funciona tranquilamente, sem o embaralhamento das linhas da tabela.

 

Abracos.

 

Amigos,

 

esta tabela é gerada a partir de uma base de dados no mysql. Isso é utilizado aqui no trabalho, e exige ser procurada de forma rápida, e acho que criar multiplas paginas vai gerar tempo e clique desnecessario. Em uma pagina somente, o funcionario aperta a tecla de atalho e digita o nome da pessoa. Simples. Talvez na maioria dos sites, realmente 1500 linhas seria um saco, mas aqui, por ser um site em Intranet rola tranquilo.

 

Obrigado pela ajuda.