Problemas com selectbox

[Marcos de Oliveira 0]

Olá pessoal há dias que me deparei com um problema que não consigo resolver de jeito nenhum, vou tentar passar o maiximo de detalhes pra que vcs possam analisar. Seguinte, eu tenho um select box que eu tive que estilizar com o niceforms.js o cliente necessita que esse menu selectbox tenha a mesma aparencia que o desenho dele, por isso optei por usar uma solução Java Script, até aí tudo bem, fiz a adaptação e deixei de acordo o desenho porem, o que está tirando meu sono é problemas que acredito eu ser de z-index, pois o selectbox só renderiza por trás dos elementos abaixo dele e nunca em cima dos elementos que é o que eu desejo. Vou postar imagens e trechos de código para que analisem melhor.

 

 

o que acontece:

 

 

O que pode está acontecendo? Abaixo vou postar trechos de codigo que se relaciona a essa parte do projeto.

 

HTML

 

...

<form action="#" method="get" id="form-encontrar" class="niceform">
		               <div id="filtro-brinquedo">
			  			<label>Selecione o brinquedo que você procura:</label><br/>
			  			<div id="option-bg">
			  			<select size="1" id="filtro" name="filtro" class="width_160">

			  				<option selected="selected"  value="Escolha seu produto">Escolha seu brinquedo</option>
			  				<option id="option-encontrar"  value="0200 - Baby Truck - Basculante">0200 - Baby Truck - Basculante</option>
			  				<option id="option-encontrar"  value="0200 - Baby Truck - Basculante">0200 - Baby Truck - Basculante</option>
			  				<option id="option-encontrar"  value="0200 - Baby Truck - Basculante">0200 - Baby Truck - Basculante</option>
			  				<option id="option-encontrar"  value="0200 - Baby Truck - Basculante">0200 - Baby Truck - Basculante</option>
			  				<option id="option-encontrar"  value="0200 - Baby Truck - Basculante">0200 - Baby Truck - Basculante</option>
			  				<option id="option-encontrar"  value="0200 - Baby Truck - Basculante">0200 - Baby Truck - Basculante</option>

			  			</select>
			  			</div>
...

 

CSS

 

*##########################################
Script: Niceforms 2.0
Theme: StandardBlue
Author: Lucian Slatineanu
URL: http://www.emblematiq.com/
##########################################*/



/*Selects*/
.NFSelect {z-index: 999!important; width: 290px!important; height:24px!important; border:1px solid transparent;background:url(../img/drop-bg.png)}
.NFSelectLeft {float:left; width:3px; height:24px!important; vertical-align:middle;}
.NFSelectRight {height:24px!important; width:auto; background:url(../img/drop-arrows.png) no-repeat 100% 0; cursor:pointer; font:12px/21px Arial, Helvetica, sans-serif; color:#888; padding-left:3px; margin-left:3px;margin-right:13px;margin-top: 5px;}
.NFSelectTarget { display: block;background:none; margin-left:-13px; margin-top:18px; z-index:99!important; left:0; top:0; padding-bottom:13px;}
.NFSelectOptions {width: 285px!important;background:#ededed; margin-left:16px; margin-top:-25px; list-style:none; padding:4px 0; color:#fff; font:11px/13px Arial, Helvetica, sans-serif; z-index:999!important; max-height:200px; overflow-y:auto; overflow-x:hidden;}
.NFSelectOptions li {padding-bottom:1px;z-index: }
.NFSelectOptions a {display:block; text-decoration:none; color:#888; padding:2px 3px; background:none;}
.NFSelectOptions a.NFOptionActive {background:#c3c3c3;}
.NFSelectOptions a:hover {background:#333;}

/*Focused*/
.NFfocused {border:1px dotted #666;}
/*Hovered*/
.NFh {background-position:0 100%;}
.NFhr {background-position:100% 100%;}
/*Hidden*/
.NFhidden {opacity:0; z-index:-1; position:relative;}
/*Safari*/
select, input, textarea, button { outline:none; resize:none;}

 

Pessoal se puderem me ajudar fico muito agradecido. Até mais.

[André do Vale 76]

Tente aumentar o z-index em .NFSelectOptions. Salvo engano, o IE7 interpreta até 9999. :thumbsup:

[Marcos de Oliveira 0]

André, primeiramente obrigado por ter respondido, fiz isso mas não funcionou, desconfio que meu z-index é sempre sobreposto por algum z-index do script niceforms.js mas já andei olhando lá e não vi nenhuma referencia a isso. Enfim, ta osso, rsrs

[André do Vale 76]

Tem o link que possa disponibilizar pra gente? Fica mais fácil inspecionando a página.

[Marcos de Oliveira 0]

vou tentar hospedar a pagina e enviar pra vcs. Agradeço.

 

Pessoal nesse link é possivel ver a pagina funcionando: http://www.portalmaisbahia.net/site/onde-encontrar.html

[André do Vale 76]

Cara, o problema todo está nessa imagem (a div que a contém está normal, ela não afeta a posição da lista) do captcha. Tentei alguns acertos pelo console, mas sem sucesso. Como esse captcha foi realizado?

[Marcos de Oliveira 0]

Pessoal encontrei a solução, o que aconteceu na verdade foi um vacilo simples, eu simplismene tava setando z-index em um elemento sem position: relative, aí não funfa mesmo, ta funcionando direitinho agora, mas ainda assim obrigado pela atenção ao tópico, moderadores, podem fechar se desejar.

 

André o problema era que o z-index não afetava nada, pq eu tinha esquecido que essa propriedade só funciona em elementos com position: absolute ou relative. Mas valeu o esforço.

[André do Vale 76]

Pessoal encontrei a solução, o que aconteceu na verdade foi um vacilo simples, eu simplismene tava setando z-index em um elemento sem position: relative, aí não funfa mesmo, ta funcionando direitinho agora, mas ainda assim obrigado pela atenção ao tópico, moderadores, podem fechar se desejar.

 

André o problema era que o z-index não afetava nada, pq eu tinha esquecido que essa propriedade só funciona em elementos com position: absolute ou relative. Mas valeu o esforço.

 

Que bom que tenha conseguido resolver o problema. :clap:

 

Eu trabalho tão pouco com posições absolutas que até me esqueci desse pequeno grande detalhe, hehe. Foi bom pra recordar, e guardar. :thumbsup: