Question

I am working on this gorgeous header here at : http://kayaskitchenbelmar.com/test/header.html

Unfortunately, in IE6, the drop downs that come off of the Print and View buttons collapse on to a new line.

This is because of the common z-index bug. I tried resolving this by making the parent div have a higher z-index and position relative with its child a lower z-index and position absolute, but that didn’t seem to work.

Possibly I’m missing something obvious?

Update

Well I think I’ve narrowed it down to being an IE6 Relative Bug

These fixes were imperative :

#nav-options{
  margin-left: 15px;
  padding-top: 20px;
  width: 232px;
  height: 41px;
  position: relative;
  z-index: 3000;
}

.popup-nav{
  clear: both;
  display: none;
  float: none;
  position: relative;
  right: 318px;
  text-align: right;
  top: 15px;
  z-index: 1000;
}

But it seems that IE6 does not recognize relative in this case. And I can’t use ‘absolute’ because it will not allow the div to be relative to the parent ul that’s calling it.

Any ideas?

Answer 1

And I added these and it was golden :

* html #nav-options {overflow: hidden;}
* html .popup-nav {right: 20px;}