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

quarta-feira, 10 de outubro de 2007

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]

Marcadores:

6 Comentários:

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

Opa. Faltou dizer onde colocar esta div e onde colocar o select. Em qualquer lugar vale?

té mais. heheh

11 de outubro de 2007 08:52  
Blogger ramon disse...

Uhum...

Sabendo-se que isso faz com que a div fique por cima do select.
É pra ser usado se a div estiver na mesma posição que o select, porém a div necessite ficar á frente.

Uso sem restrição.

[]'s

11 de outubro de 2007 10:14  
Blogger Felipe Magalhães disse...

... e eu que pensava q só eu q usava o termon "IEca"

\o/

18 de fevereiro de 2008 09:41  
Blogger ramon disse...

haha. Muita gente usa esse termo...

18 de fevereiro de 2008 18:30  
Blogger Samira disse...

tô com dificuldade de aplicar o código a div está a frente mas mesmo assim o select ainda está na frente

31 de maio de 2010 11:02  
Blogger Ramon disse...

Oi Samira, senão funcionou com vc, existe a opção de ocultar todos os selects da página, quando a div em questão aparecer, e quando desaparecer, mostra-los novamente, qualquer duvida, deixa seu email, pra entrar em contato.

31 de maio de 2010 11:09  

Postar um comentário

Assinar Postar comentários [Atom]

<< Página inicial