Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde Pessoal!
Montei uma classe genérica para estilizar as tabelas do meu sistema, porém me deparei com apenas um problema, apenas uma, isso mesmo, apenas uma tabela no Internet Explorer fica maior que o esperado, olhem na imagem abaixo:
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.fernandotholl.net/imagens/menu-4.jpg&key=f150c8c4e6d54686c1759b7c9a52d33b6e6ceeb38d2b586005d3dfa56307f36d" alt="menu-4.jpg" />
O CSS:
/ Tabelas Padrão do sistema /
.table-sys{
border-collapse: collapse; /* CSS2 */
background-color: #fff;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: solid 1px #D5D5D5;
width: 100%;
table-layout:auto;
}.table-sys > tr, td{
border: solid 1px #D5D5D5;
height: 30px;
padding: 2px 0 0 5px;
}tr:nth-of-type(even) td { background-color: #FAFAFA; }
.table-sys .table-header{
background-color: #F2F2F2;
height: 27px;
font-weight: bold;
border: solid 1px #D5D5D5;
}HTML
<table class="table-sys">
<thead class="table-header">
<tr>
<td>Totais:</td>
<td>Descrição:</td>
<td>Porcent.</td>
</tr>
</thead>
<tbody>
<tr>
<td>198.00</td>
<td>Materiais cadastrados</td>
<td><img src="imagens/up.jpg" alt="%" /><span>3,0%</span></td>
</tr>
<tr>
<td>150.156</td>
<td>Materiais ativos</td>
<td><img src="imagens/down.jpg" alt="%" /><span>2,5%</span></td>
</tr>
<tr>
<td>45</td>
<td>Usuários online</td>
<td><img src="imagens/up.jpg" alt="%" /><span>1,9%</span></td>
</tr>
<tr>
<td>345</td>
<td>Materiais atualizados hoje</td>
<td><img src="imagens/up.jpg" alt="%" /><span>9,3%</span></td>
</tr>
<tr>
<td>2.568</td>
<td>Fornecedores cadastrados</td>
<td><img src="imagens/up.jpg" alt="%" /><span>4,5%</span></td>
</tr>
</tbody>
</table>
Eu não consigo ententer porque no IE a <td> fica mais alta que no Firefox, quebrando assim o meu layout. Se algum conseguir me ajudar fico grato.Pelo menos pra mim, é muito dificil fazer um layout sem dar problemas em todos os navegadores "populares".
Se a dica do NetBoy não funcionar, crie uma css para o IE e defina uma margin-bottom na table. Isso deve afastar uma tabela da outra.
Nossa, super rápida as respostas, obrigado aos dois.
@NetBoy, quanto a sua dica, infelizmente não funcionou. Quanto ao margin e padding, como crio o layout do zero, costumo zerar todas margins e paddings e posteriormente coloco os valores se necessário, no final do desenvolvimento, vou la e coloco a versão resumida nas que não precisarão.
@Marrabel, o layout para esse sistema precisa ser digamos assim, 100% compatível, sem utilizar hacks, pois isso é essencial para a empresa, mais se for a última alternativa, vou estudá-la.
Se algum tiver mais uma sugestão ai.
Hmmm, tentou css condicional ?
Então, eu tentei utilizar
_height:28px; ou *height:28px;
Pois esses pelo menos fica menos visivel no html, porém vou tentar utilizar os comentários condicionais, eu retorno com o resultado segunda-feira, meu expediente hoje acabou :)Até mais pessoal
Tenta um
overflow:hidden;
Acredito que o erro seja no elemento pai e não na tabela.
Bom dia a todos!
@Diéssica, infelizmente não funcionou, eu acredito que o problema é decorrente do padding nas <td> renderizadas no IE.
@Thiago Moraes, nesse caso não, pois o elemento pai é genérico também e utilizado em outros setores e o mesmo funciona corretamente. Como pode ser observado na imagem, o problema está no tamanho da <td>
Mais não teve jeito, tive que utilizar **CSS Condicional**, porém tive que zerar o topo no padding da <td>, estava utilizando 2px e continuava grande no IE, removendo, tudo certo :D. Então o código corrigido é esse:HTML com o Hack
<link type="text/css" href="css/index.css" rel="stylesheet" title="EMS" />
<!--[if IE]><link type="text/css" href="css/iehack.css" rel="stylesheet" title="EMS" /><![endif]-->index.css
/ Tabelas Padrão do sistema /
.table-sys{
border-collapse: collapse; /* CSS2 */
background-color: #fff;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: solid 1px #D5D5D5;
width: 100%;
table-layout:auto;
}.table-sys > tr, td{
border: solid 1px #D5D5D5;
height: 30px;
padding: 0 0 0 5px;
}tr:nth-of-type(even) td { background-color: #FAFAFA; }
.table-sys .table-header{
background-color: #F2F2F2;
height: 27px;
font-weight: bold;
border: solid 1px #D5D5D5;
}iehack.css
.table-sys > tr, td{
height: 29px;
padding: 0 0 0 5px;
}Obrigado a todos pela ajuda.
Que bom que deu certo :grin:
Qualquer coisa estamos ai :thumbsup:
Se o problema é a irregularidade na altura da <td> entao porque você nao estiliza ela com uma altura fixa ?
.table-sys tr td{
Outra coisa, olhei o seu codigo e isso aqui me chamou atencao:
/ Nada muito importante, mas uma dica, quando os 4 valores sao iguais você nao precisa repetir, entao é a mesma coisa que isso aqui: /