Nome:
Local: Rio de Janeiro, RJ, Brazil

Que perguntinha hein?! Mas vamos lá, adoro estudar assuntos relacionados à web, sempre que posso aprendo uma tecnologia, técnica ou linguagem nova. Tento sempre ver quais são as tendências e acompanha-las, enfim eu sou um eterno aprendiz. Deixando o lado profissional, entrando no lado pessoal, sou uma pessoa super gente-boa (pelo menos eu me acho. rs), adoro curtir a night, sair com os amigos, fazer novas amizades e viajar (tem coisa melhor do que isso?) Acho que você já está sabendo demais sobre mim. Fuiii...

sábado, 16 de agosto de 2008

Exibir imagem de fundo da tr no Internet Explorer

Aqui vai uma dica legal, um dia desses estava montando uma página quando me deparei com um

problema:

Construi a seguinte tabela para exibir dados tabulares.

<table>
<thead>
<tr>
<td>Titulo 1</td>
<td>Titulo 2</td>
<td>Titulo 3</td>
<td>Titulo 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>ln1 col1</td>
<td>ln1 col2</td>
<td>ln1 col3</td>
<td>ln1 col4</td>
</tr>
<tr>
<td>ln2 col1</td>
<td>ln2 col2</td>
<td>ln2 col3</td>
<td>ln2 col4</td>
</tr>
</tbody>
<tr>
</table>


Agora estilizando a linha da tabela:

tr { background:transparent url("images/imgLinha.png") no-repeat; }


O estilo acima não existe mistério, ou pelo menos assim eu pensava, para cada linha da

tabela mandei o css carregar a imagem imgLinha.png como background, só que aí está o

problema, pois por algum motivo que desconheço o IEca não renderiza a imagem pela linha

(tr) e sim pela coluna (td), ou seja, para cada coluna repetia o background não fazendo o

efeito desejado, como não sou burro (não ria), logo pensei: Se em cada coluna repete o

background, definirei o background da coluna como transparente e pronto.


td { background:transparent; }


Só que o IEca cada vez mais me surpreende, simplesmente com o código acima some o

background. Depois de muita pesquisa, encontrei a solução, que é a seguinte:


td { background-position:expression(-this.offsetLeft); }


Com essa expressão, você consegue exibir o background da linha.Achei legal colocar isso

aqui, pois não achei um site em português que tivesse a solução e a considero bem útil.

Fuiii...

Marcadores: ,

8 Comentários:

Blogger Micox - Náiron J. C. G. disse...

Uou, muito interessante a técnica. Eu não conhecia.

23 de setembro de 2008 às 15:36  
Blogger mike disse...

Excelente post. Vale lembrar que colocando o DOCTYPE corretamente, esse problema nao acontece mais.

Como estou trabalhando em uma aplicacao que possui um doctype errado, fazendo o IE entrar em quirks mode (que deixa ele agindo como se fosse ie 5.5). Precisava adicionar uma image ao bg de uma linha e estava perdido. Nao conhecia essa dica.

26 de junho de 2009 às 05:12  
Blogger ramon disse...

@Michael, valeu pelo comentário. No projeto que tive usar esse hackzinho, usei o doctype strict e não funcionou: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

o doctype certo, o qual se refere é o strict ou transitional?

26 de junho de 2009 às 09:19  
Blogger mike disse...

@Ramon, por "doctype certo" eu quis dizer qualquer um que nao leve o browser pro Quirksmode pois ele agira como se fosse IE 5.5

Mas falei sem testar e falei besteira. Testei aqui e voce esta certo. Realmente esse bug continua existindo.

Aproveito pra complementar. Ele tambem acontece no Safari (la nao testei com doctype certo). E essas expressions funcionam apenas no ie. Corrigi esse problema usando javascript (com jquery) mesmo. Sei que nao foi a melhor solucao, mas foi o jeito.

Se alguem se interessar, fiz assim (usando a mesma logica da expression do post):
$('tr.LINHA-COM-BACKGROUND td').each(function(i) {
$(this).css('background-position',('-'+($(this).offset().left))+'px');
});

26 de junho de 2009 às 10:00  
Blogger ramon disse...

@michael - Ah valeu, só funciona no IEca msm, por isso que no título está escrito "no IE". Bom, se não funciona no safari, é uma boa solução. Não testei, mas acho que poderia reduzir a sua rotina, tirando o each, não faz muita diferença, mas se parece mais com css:
$('tr.LINHA-COM-BACKGROUND td').css('background-position',('-'+($(this).offset().left))+'px');

28 de junho de 2009 às 11:54  
Anonymous Anônimo disse...

muito bom!
obrigada! estava precisando disso e não achava em lugar nenhum.

4 de agosto de 2009 às 17:23  
Blogger Renata Rodrigues disse...

Ramon por gentileza estou com um problema Urgente estou na reta final de um projeto e acontce o seguinte.

tenho uma table onde eu usava uma borda no rodape da TD, so que prescisei mudar da TD para a TR. so que o IE nao entende a borda na TR o que eu poderia estar fazendo aguardo uma resposta urgente!!!

pode me mandar por email..
renatabarthman@gmail.com


Obg

Renata

10 de setembro de 2009 às 15:54  
Anonymous Anônimo disse...

uuuuuaaaauuuuuu..
Excelente dica, estava com o mesmo problema e logo de primeira encontrei a solucao.

Vlw por nos salvar dos terriveis e inimaginaveis misterios do IE..

[]'s

26 de setembro de 2010 às 18:01  

Postar um comentário

Assinar Postar comentários [Atom]

<< Página inicial