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.
Agora estilizando a linha da tabela:
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.
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:
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...
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...
8 Comentários:
Uou, muito interessante a técnica. Eu não conhecia.
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.
@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?
@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');
});
@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');
muito bom!
obrigada! estava precisando disso e não achava em lugar nenhum.
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
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
Postar um comentário
Assinar Postar comentários [Atom]
<< Página inicial