Position absolute não funciona no IE

[Filipe_Moraes 15]

Olá pessoal.

Eu tenho uma div com 20px de altura.

Dentro dessa div eu tenho outra div de 100px de altura que tem position='absolute' e está escondida (através do jquery).

Quando clico na div pai, a div maior aparece por cima, ou seja, é um popup.

Em todos os browser's funciona perfeitamente, porém no IEca 9 (Internet Explorer) a div de 100px aparece só os 20px, o resto aparece transparente, como se estivesse avisando que o tamanho não cabia 100% na div pai, que tem só 20px.

Mas ai vem minha dúvida, se a div de 100px tem position=absolute, deveria estar livre da altura da div pai.

 

Porque não funciona nessa merreca que o Bill Gates fez?

Agradeço a ajuda.

[Filipe_Moraes 15]

Pessoal, ao comentar essa parte do css da div que contem todas as div's, passou a funcionar:

...
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4eb9e2, endColorstr=#1da8d9)";
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4eb9e2, endColorstr=#1da8d9);
   background: -moz-linear-gradient(top, #4eb9e2, #1da8d9) repeat-X;
   background: -webkit-gradient(linear, left top, left bottom, from(#4eb9e2), to(#1da8d9)) repeat-X;
...

 

Mas preciso desse código, porque dá esse erro no IE?

[Bergs 53]

posta os códigos do que você já fez... parece que o ie9 não deixa passar erro... igual ao pai dele e o avô, o tataravô ie6 era o mais chato! :grin:

[Filipe_Moraes 15]

É o seguinte, eu tenho essa estrutura de div's no site:

<div class='mainmenu'>
   <div class='mn_searchlist' onClick='openListPopup(this);'>
<div class='mn_listtype' id='selectvalue'>Produtos</div>
<div class='popbox'>Popup 1</div>
   </div>
</div>

 

A div principal, mainmenu, tem o seguinte css:

.mainmenu {
  width: 100%;
  min-width: 955px;
  height: 55px;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9998;    
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4eb9e2, endColorstr=#1da8d9)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4eb9e2, endColorstr=#1da8d9);
  background: -moz-linear-gradient(top, #4eb9e2, #1da8d9) repeat-X;
  background: -webkit-gradient(linear, left top, left bottom, from(#4eb9e2), to(#1da8d9)) repeat-X;
}

 

E os restantes css:

.mn_searchlist{
   position: relative;
   float: left;
   width: 93px;
   height: 17px;
   margin-top: 8px;
   cursor: pointer;
}

.mn_searchlist .mn_listtype{
   float: left;
   width: 74px;
   height: 16px;
   margin: 1px 0 0 6px;
   font-family: Verdana, Geneva, sans-serif;
   font-size: 12px;
   color: #333333;
}

.popbox {
 position: absolute;
 z-index: 9999;
 background: #FFF;
 border: solid 1px #FFF;
 border-radius: 4px;
 box-shadow: 0px 0px 5px #828282;
 background-color: #fff;
 padding: 8px;
}

 

Ao clicar na div "mn_searchlist", a seguinte função é executada:

<script>
   $('.popbox').hide();
   function openListPopup(d){
   	var offset = $(d).offset();
   	var nH = $(d).height()+5;

   	$(d).find('.popbox').fadeTo(0,0);
   	$(d).find('.popbox').show();
   	$(d).find('.popbox').css('top',parseFloat(nH)+'px');
   	$(d).find('.popbox').fadeTo(500,1);
   };
</script>

 

O que acontece no IE é o seguinte: a div "mainmenu" tem 55px de altura, ao clicar na div "mn_searchlist", a div "popbox" deveria aparecer inteira, porém no IE só aparece uma parte que cabe dentro da div "mainmenu", a outra parte que fica fora da div, acaba por ficar transparênte, veja a imagem abaixo:

 

Acontece que se comentar esse código no css da div "mainmenu" e substituir por uma imagem de fundo, passa a funcionar, mas não quero usar imagens:

...
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4eb9e2, endColorstr=#1da8d9)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4eb9e2, endColorstr=#1da8d9);
  background: -moz-linear-gradient(top, #4eb9e2, #1da8d9) repeat-X;
  background: -webkit-gradient(linear, left top, left bottom, from(#4eb9e2), to(#1da8d9)) repeat-X;
...

 

Agradeço a ajuda.