Ir para conteúdo

POWERED BY:

Arquivado

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

pabloleary

[Resolvido] Tabela com problema de visualização

Por , em Desenvolvimento frontend

Recommended Posts

pabloleary    0

pabloleary
Postado

oi pessoal, estou com um problema com css no firefox quando testo no ie ele apresenta de uma forma , no firefox a tabela fica desforme

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title></head><style>.displayTab { display:block;}body { background-color: white; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 50px; padding: 0px;}</style><body><table width="50%" border="1" cellspacing="0" cellpadding="0" > <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr class="displayTab"> <td colspan="5">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td> </tr> <tr> <td>a</td> <td>a</td> <td>a</td> <td>a</td> <td>a</td> </tr> <tr class="displayTab"> <td height="22"> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr></table></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

inforsis    1

inforsis
Postado

Retire a definição da class="displayTab" na tag <td>

É realmente necessário isso?

.displayTab {display:block;}
Conferi este artigo do gio! pode lhe ser util.

 

Trabalhando com Tabelas

 

Até Mais.

Compartilhar este post

Link para o post
Compartilhar em outros sites

pabloleary    0

pabloleary
Postado

pessoal , opiniões ?pode parecer estranho o porque eu atribuo estilo nas linhas da tabela . é que estou trabalhando com um esquema de display , em certos momentos na minha aplicação essa linha vai aparecer em outros ela desaparece .só que estou com esse problema do Firefox que esta apresentando a tabela de modo incorreto

Compartilhar este post

Link para o post
Compartilhar em outros sites

pabloleary    0

pabloleary
Postado

publiquei o html no geocities

 

http://br.geocities.com/saulo_camposi/tabela.html

 

por favor , testem no IE e no Firefox

(no IE o erro que aparece no canto inferior esquerdo e referente ao geocities )

 

coloquei o css no mesmo documento pra tornar o problema mais simples , e uma simples tabela , na segunda linha tem a class="displayTab" e o colspan="5" e na quarta linha tenho a class="displayTab" somente isso .

 

onde um coloco a class o firefox da problema

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoXbY    3

RoXbY
Postado

o problema é com o class da tr como o inforsis disse, mas o por que eu não sei ... se for uma classe, de outro nome a ela pois a palavra pelo jeito é reservada.. altere o nome da mesma e a trate no css..

 

isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

pabloleary    0

pabloleary
Postado

mudei de class pra id pra ver se tem efeito , a mesma coisa

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title></head><style>#aha {	display:block;}body {	background-color: white;	font-family: Verdana, Arial, Helvetica, sans-serif;	margin: 250px;	padding: 0px;}</style><body><table width="50%" border="1" cellspacing="0" cellpadding="0" >  <tr>	<td> </td>	<td> </td>	<td> </td>	<td> </td>	<td> </td>  </tr>  <tr id="aha">	<td colspan="5">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>  </tr>  <tr>	<td>a</td>	<td>a</td>	<td>a</td>	<td>a</td>	<td>a</td>  </tr>  <tr id="aha">	<td height="22"> </td>	<td> </td>	<td> </td>	<td> </td>	<td> </td>  </tr>  <tr>	<td> </td>	<td> </td>	<td> </td>	<td> </td>	<td> </td>  </tr></table></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Título do tópico editado para faiclitar futuras buscas.Sai: firefox com problemas de cssEntra: Tabela com problema de visualização

Compartilhar este post

Link para o post
Compartilhar em outros sites

inforsis    1

inforsis
Postado

continuo na busca por compreender o porque o firefox não apresente as tabelas com css de um modo correto

pabloleary o problema não é o FF não apresentar as tabelas corretamente... o problema esta na definição da propriedade display:block; como eu já citei lá em cima. No artigo do gio!

 

Trabalhando com Tabelas

 

Ele trabalha com tabela, e apresenta ao final um resultado que é visualizado no IE e no FF sem problemas.

 

Não entendi o porque de usar a classe displayTab com o valor block para a propriedade display. Porém achei uma possivel solução.

Substitua:

 

.displayTab {
display:block;
}

 

para

.displayTab {
display:inline-block;
}

 

display: inline-block Comporta-se como se fosse um bloco, porém na mesma linha do conteudo.

display: block O elemento é redenrizado como um bloco e não permite elementos HTML ao lado, ao menos que você declare a propriedade float ou alguma outra para o elemento ao lado do bloco...

 

Caso isso resolva seu problema, retorne e informe. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

pabloleary    0

pabloleary
Postado

uhuh , a solução do problema esta bem perto a dica do inforsis foi bem util para resolver apresentação de modo correto , acredito que esse post irá tirar a dúvida do Gio , do porque que eu quero isso . Caso a dúvida fugir do escopo desse fórum (porque envolve javascript) sem problemas , quero agradecer desde ja os amigos da comunidade . vamos ao problema

 

 

realmente , utilizando o inline-block a tabela apresenta do modo correto

 

http://br.geocities.com/saulo_camposi/tabela.html

 

agora gostaria que esse inline-block funcionasse com uma função Javascript

 

http://br.geocities.com/saulo_camposi/tabelaJS.htm

 

como no esquema abaixo

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title></head><script language="javascript">function aparecerDiv(){try{document.getElementById('linea').style.display 	= 'block';document.getElementById('lineb').style.display 	= 'block';}catch(e){}}</script><style>.linhasTabela {	/*display:inline-block;*/	display:none;}body {	background-color: white;	font-family: Verdana, Arial, Helvetica, sans-serif;	margin: 250px;	padding: 0px;}</style><body><a href="#" onclick="aparecerDiv()">aparecer linha</a><table width="50%" border="1" cellspacing="0" cellpadding="0" >  <tr>	<td> </td>	<td> </td>	<td> </td>	<td> </td>	<td> </td>  </tr>  <tr id="linea" class="linhasTabela">	<td colspan="5">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>  </tr>  <tr>	<td>a</td>	<td>a</td>	<td>a</td>	<td>a</td>	<td>a</td>  </tr>  <tr id="lineb" class="linhasTabela">	<td height="22"> </td>	<td> </td>	<td> </td>	<td> </td>	<td> </td>  </tr>  <tr>	<td> </td>	<td> </td>	<td> </td>	<td> </td>	<td> </td>  </tr></table></body></html>

se eu colocar o inline-block ele nao funciona 

<script language="javascript">function aparecerDiv(){try{document.getElementById('linea').style.display 	= 'block';document.getElementById('lineb').style.display 	= 'block';}catch(e){}}</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

inforsis    1

inforsis
Postado

Olá pabloleary veja que curioso.

Se mudar o valor de block para table-row percebe que funciona do modo que você quer no FF. Porém o IE não suporta esse valor para propriedade display. http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

Estou pensando em alguma saída com comentário condicional para o problema. Posterioemente posto o resultado. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Editando:

 

Com comentário Condicional funcionou sim. Não te garanto ser a saída mais correta, porém funciona.

 

Seu código JavaScript vai ficar assim:

[url="http-~~-//december.com/html/4/element/script.html"]<script[/url] language="javascript">
function aparecerDiv(){
try{
document.getElementById('linea').style.display     = 'table-row';
document.getElementById('lineb').style.display     = 'table-row';
}
catch(e){}
}

</script>
<!--[if IE]>

[url="http-~~-//december.com/html/4/element/script.html"]<script[/url] language="javascript">
function aparecerDiv(){
try{
document.getElementById('linea').style.display     = 'block';
document.getElementById('lineb').style.display     = 'block';
}
catch(e){}
}
</script>
<![endif]-->

 

Caso queira saber mais sobre comentários condicionais.

 

Qualquer nova dúvida post. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

inforsis    1

inforsis
Postado

Fico feliz em ter ajudado a resolver o problema.

Novas dúvidas post.

Use sempre a Busca do Fórum iMasters antes de novos posts. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

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