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...

Limite de arquivos css

Oi galera!

Bom, estou bastante atarefado ai tive uma folguinha e resolvi dar uma passada por aqui.

Esse post será o primeiro da categoria voceSabia, como todos os "você sabia" existentes por aí, são curiosidades que muitas das vezes não trazem informações muito úteis para as nossas vidas, mas nós (pelo menos eu) adoramos ler. Espero que goste.

Você Sabia ?

...que o IEca têm limite de arquivos suportados para as tags < link >?


Isso mesmo, o IEca possui um limite de 30 arquivos linkados com a tag link, passando esse limite, simplesmente ignora os arquivos subseqüêntes, provavelmente você nunca chegará à esse limite e se chegar, há uma grande possibilidade de você ter que rever seu projeto, pois há algo errado, mas pode ser também que seja necessário o uso de todos esses arquivos, nesse caso é preciso usar:

Código:

...
< style >
@ import(enderecoDoArquivo);
< /style >
...


No próximo post, mostrarei como construir um gadget (a sidebar do Windows Vista) utilizando HTML, Javascript e XML.

Fuiii...

Mais um que resolve a sobreposicao do elemento select no IE

Eu sei que a Microsoft é a empresa que as pessoas amam odiar (que incoerência não?!), basta ela pisar um pouco na bola que todos reclamam (inclusive eu), porém há situações que você não pode ter outro sentimento senão ódio por tal empresa. Na minha opinião o pior produto da Microsoft é o Internet Explorer, o qual eu humildimente chamo-o de IEca, ele é o responsável por minhas maiores dores de cabeças no trabalho (e algumas vezes, fora também), é um hackzinho aqui, uma outra "regra" de validação que não obedece e por aí vai. Há muito eu tinha o conhecimento, que mais hora ou menos hora, iria me deparar com o problema da tag select. O quê?!, você não conhece esse problema? Sorte a sua, mas vou te explicar. O elemento <select> simplesmente aparece por cima de todos os outros elementos HTML, que até à uma hora atrás isso pra mim era inexplicável, na verda a explicação é, se me permitem, escrota, mas foi a explicação que li no próprio site da microsoft. Como diria Jack Estripador, vamos por partes.

• Procurei uma explicação plausível no site da microsoft o porquê do select sobrepor todos os outros elementos.



• Lá explica-se que há duas categorias de elementos: windowed e windowless.



• O Problema, o elemento select é um windowed e todos os outros são windowless, ou seja, eu não posso comparar um zIndex de um elemento windowed contra um windowless, pois eles não se entendem o.O (Após ler isso, respirei fundo e me perguntei, por que meu Deus?! Qual é o sentido de todos os elementos serem windowless e o select ser um windowed? Pra mim, isso não faz sentido algum e pra você?, se fizer, por favor, me informa) passado o momento de choque, continuo a leitura da página até o final.



• Na página eles mencionam algo que pode ser (na realidade é) a solução do problema:
  
  "This leaves the SELECT element as the only element that is windowed. If you use the preceding code to run the page in Internet Explorer 5.5, when you set the z-index of the SELECT element to a value that is greater than 5, it draws on top of the IFRAME. When you set the z-index of the SELECT element to a value that is less than 5, the IFRAME overlaps it, even though they are both windowless elements."
  
  Vale lembrar que a explicação acima é a partir do IEca 5.5, pois abaixo disso o iframe é considerado um elemento windowed. Pra você que não saca muito de inglês o texto acima fala basicamente que...
  
  "O Iframe é um (talvez o único) elemento que consegue sobrepor o elemento select, quando este por sua vez tiver um z-index maior, ou for renderizado (construído) depois."
  
  Claro que o texto não foi traduzido, apenas escrevi a idéia que o texto dá.
  
  - Poxa legal, mas agora ficou uma dúvida, você não disse que elementos windowed não conseguem comparar z-index de elementos windowless? Então como é que o iframe (elemento: windowless) consegue ficar na frente do <select> (elemento:windowed)
  -Pois é... Mas aí a microsoft me sai com essa pérola.
  
  "This is what makes the IFRAME unique: it follows z-index with respect to windowless elements, and it supports z-index with respect to windowed elements like the SELECT element in this case."
  
  Tradução livre (põe livre nisso)
  "Isto é que faz o IFRAME único ele consegue respeitar os dois z-indexes sem problemas."
  
  Ou seja, depois disso só podemos chegar à uma conclusão: Erro de implementação. Pois a única explicação que obtive para o IFRAME ter essa característica "única" é que anteriormente ele era windowed e agora é windowless, por consequência (off: pena que ninguém mais usa trema, gostava tanto delas) herdou as características de um elemento windowed.



• Apelar pra aquele que tudo-sabe (leia-se:Google)



• Solução:

Achei essa página e lá contém 3 soluções, porém só usei uma e funcionou de acordo, nem testei as outras.

Na div que vai ficar em cima do select, inclui-se um iframe recebendo as características css a seguir:


iframe {
display:none;/*sorry for IE5*/
display/**/:block;/*sorry for IE5*/
position:absolute;/*must have*/
z-index:-1;/*must have*/
filter:mask();/*must have*/
width: 100%;/*must have for any big value*/
height: 100%;/*must have for any big value*/;
}


e no html:

<div>
<!--[if IE]><iframe></iframe><![endif]-->
// O comentário acima o IE lê (só ele mesmo pra ler comentário) e só cria o iframe se for o IE.
</div>


e Shazam, agora a sua div fica por cima do select.

Espero que ajude muita gente, pois pra mim foi uma ajuda e tanta, tentei aqui colocar o conceito todo até chegar no resultado final, pois não vi muito disso por aí, as pessoas só colocam o código, mas não explica todo o desenvolvimento do raciocínio.

Fuiii...

[UPDATE]
Fiz alguns teste em casa, com essas configurações, mesmo você colocando um número de z-index do select maior que o do iframe, o select estará por baixo do iframe (que no nosso caso, visuaremos a div, pois o iframe está oculto), então está avisado! XD
[/UPDATE]

Programando nos Comentarios

Isso mesmo que você leu, o IEca (só podia ser ele), te permite programar nos comentários, essa é uma das práticas que uso para resolver problemas de renderização. Tipo float, position, entre outros.

O IEca como todos sabemos, tenta ao máximo não seguir a recomendações da W3C e portanto nos traz muitos problemas na hora de exibir o site da forma desejada, ainda bem que para transpassar esse problema existem várias técnicas, como:

• Fazer dois css's, um para o IE e outro para o FF, e no javascript fazer a chamada do css correto.


• Colocar uns hacks de underline, antes das propriedades.


• Colocar as execessões do IE em comentário condicional.


• Fica por conta da sua imaginação.

Essas são as três que conheço e considero legais, excluindo a segunda, pois colocando esses hacks o css não valida e é sempre bom tentar validar, infelizmente nem sempre isso é possível :(. Bom, prefiro trabalhar com o desvio condicional (muitas das vezes), pois, normalmente, só tenho que se alterar algumas propriedades, não são todas. Mas em algumas situações a melhor opção é testar o tipo de browser e carregar o css correto para o browser, sem mais lenga-lenga, vou mostrar como é uma estrutura do comentário condicional, agora vê se pode comentário condicional, só rindo mesmo. rs:

<!--[if IE]>
<style>
html {overflow:auto;}
</style>
<![endif]-->

Ás vezes é necessário especificar a versão do IE, pois a cada versão ele renderiza diferente.
Dentro das tag style, você já sabe, é como se estivesse no css e faz-se as alterações necessárias.

fuiii...

Submeter com a tecla Enter no Internet Explorer

Amigos e amigas, mais uma vez aqui estou para falar de um, dos vários "bugs" do IEca, pois bem estava feliz da vida de ter resolvido algumas coisas chatas em relação ao IEca, estava tudo funfando legal, mas você sabe, alegria de pobre dura pouco, e alegria de desenvolvedor testando o seu código no IEca, dura menos ainda.

Fui submeter uma pesquisa teclando o Enter e o IEca não submetia, aliás ele submetia, mas não interpretava o que tinha que ser feito. Estranho não?! Ainda bem que para resolver esse problema é bem simples, existe um elemento html que se chama button, não estou falando do input, ele funciona de forma semelhante ao input, com muito mais opções e é a solução do meu problema.

Características:

• Aceita três tipos de botões button, submit e reset.


• Tem que abrir e fechá-lo


• Pode-se colocar uma imagem


• É imprencídivel que coloque algum texto no botão, pois é ilegal (segundo a W3C), que coloque apenas uma imagem


• Semelhante ao input coloca-se o value, para submeter os dados

Uso do elemento:

<button type="submit" name="submit" value="submit">Enviar<img src="http://www.blogger.com/icons/send.gif" alt="Enviar" /></button>


Existem outras formas de fazer essa submssão funcionar, fica a seu critério escolher uma, mas eu gosto dessa solução e vc?

Fuiii...