1

I am writting some html code which have following structure 

<div style="position:relative">
<form>
<table>
<tr>
<td> <div id="Upper_Element" style="position:absolute;z-index:10"></div> </td>
</tr>
<tr>
<td> <div id="Lower_Element" style="position:absolute;z-index:-1"></div> </td>
</tr>
</table>
</form>
</div>

here Upper_Element is a YUI autocomplete text box (where suggestion are displayed when user enters anything like google) and Lower_Element is normal drop down box(<select>). In IE6 , When autocomplete suggestion are displayed Lower_Element is displayed over the suggestions list . In other browser like IE8 its working fine. I tried position and z-index attributes but no luck.

Please let me know what else can be tried.

Thanks in advance !

andyb
  • 43,435
  • 12
  • 121
  • 150
Ajinkya
  • 22,324
  • 33
  • 110
  • 161

2 Answers2

1

What do you mean by "Lower_Element is a normal drop down box"? Is it a <select> element or a <div> as in your example? If it is a <select> then you are seeing a very old bug that affects IE6 and has been asked/solved many times before, for example Z-Index problems with IE6 and html <select> element and iframe shimming or ie6 (and below) select z-index bug

Community
  • 1
  • 1
andyb
  • 43,435
  • 12
  • 121
  • 150
  • You can hide the ` – andyb Apr 11 '11 at 13:06
  • Thanks @andyb :) Is there any other solution ? As I dont want to hide it. – Ajinkya Apr 11 '11 at 13:07
  • If you use jQuery then the [bgiframe](http://docs.jquery.com/Plugins/bgiframe) plugin should solve your problem. – andyb Apr 11 '11 at 13:11
  • Without doing what bgiframe does yourself, you have to hide it in IE6. As I said in my answer, it is a problem that will never be fixed in IE6. – andyb Apr 11 '11 at 15:44
0

Use position: absolute and z-index attribute to position one element above another

Related links:

Code

<div style="position:absolute"> ... </div>

Positioning:

<div style="position:absolute; top: 100px; left: 100px"> ... </div>

UPD

<div style="position:relative">
  <form>
    <div id="upper_element" style="position:absolute; z-index:2">I am top level div!</div>
    <div id="lower_element" style="position:absolute; z-index:1">I am on the bottom of life</div>
  </form>
</div>

http://jsfiddle.net/vLx6X/

fl00r
  • 82,987
  • 33
  • 217
  • 237
  • I don't use neither htmldog nor w3c :), I use russian resources, so I've picked up first what I've googled :) – fl00r Apr 11 '11 at 12:33