mysterious z-indexing in IE

I'm working on a site with a drop-down menu, and a mysterious z-index
issue in IE7 has left me stumped. The drop-down works correctly in
Firefox, and I've tried multiple drop-down methods (css-only, some
simple javascript, spry...) and the problem is always the same: in IE,
the drop-down items fall behind the main content.

Take a look at this page: http://tinyurl.com/c9mfkc

I'm aware of the IE z-index bugs, and I've tried countless fixes ---
but I'm clearly missing something. I'd really appreciate it if one of
the seasoned pros could take a glance at it and point out my mistake.

Many thanks!!



HTML and CSS validate (except for the styles used in one of the
Wordpress plugins --- but I've already determined that the plugin is
not the problem.)

zackisaiah (AT) hotmail (DOT) com wrote:

I'm working on a site with a drop-down menu, and a mysterious z-index
issue in IE7 has left me stumped. The drop-down works correctly in
Firefox, and I've tried multiple drop-down methods (css-only, some
simple javascript, spry...) and the problem is always the same: in IE,
the drop-down items fall behind the main content.

Why a tinyurl?

OK, You seem genuine, I'll give you the benefit of the doubt this time.

Take a look at this page: http://tinyurl.com/c9mfkc

I'm aware of the IE z-index bugs, and I've tried countless fixes ---
but I'm clearly missing something. I'd really appreciate it if one of
the seasoned pros could take a glance at it and point out my mistake.

Give the owner of the dropdown the same z-index as the dropdown. In this
case probably the <li>.

rf wrote:

zackisaiah (AT) hotmail (DOT) com wrote:
I'm working on a site with a drop-down menu, and a mysterious z-index
issue in IE7 has left me stumped. The drop-down works correctly in
Firefox, and I've tried multiple drop-down methods (css-only, some
simple javascript, spry...) and the problem is always the same: in
IE, the drop-down items fall behind the main content.

Why a tinyurl?

OK, You seem genuine, I'll give you the benefit of the doubt this
time.
Take a look at this page: http://tinyurl.com/c9mfkc

I'm aware of the IE z-index bugs, and I've tried countless fixes ---
but I'm clearly missing something. I'd really appreciate it if one of
the seasoned pros could take a glance at it and point out my mistake.

Give the owner of the dropdown the same z-index as the dropdown. In
s/owner/parent

this case probably the <li>.

On 03/18/09 22:47, zackisaiah (AT) hotmail (DOT) com wrote:

I'm working on a site with a drop-down menu, and a mysterious z-index
issue in IE7 has left me stumped. The drop-down works correctly in
Firefox, and I've tried multiple drop-down methods (css-only, some
simple javascript, spry...) and the problem is always the same: in IE,
the drop-down items fall behind the main content.

Take a look at this page: http://tinyurl.com/c9mfkc

I'm aware of the IE z-index bugs, and I've tried countless fixes ---
but I'm clearly missing something. I'd really appreciate it if one of
the seasoned pros could take a glance at it and point out my mistake.

Many thanks!!



HTML and CSS validate (except for the styles used in one of the
Wordpress plugins --- but I've already determined that the plugin is
not the problem.)

I can't answer your question, but just wanted to point out that it
took nearly a minute for your page to load here, and during that
time, the content appeared as dark blue and gray on a dark gray
background, resulting in near invisibility. Once the site finished
loading, it picked up more reasonable colors and was then viewable.

Had I been a customer of the site, I would have given up before the
site finished loading.

I don't know why it's doing that, but thought you should be aware.

Best Regards,

Give the owner of the dropdown the same z-index as the dropdown.

Currently, the drop-down items have z-index of 1000. The menu itself
has a z-index of 100. The div with the main content has a z-index of
0. I tried your suggestion and gave the parent element an equal z-
index, but no change in IE. I tried giving all elements inside the nav
an equal z-index, still no change. I've tried stripping out all z-
index, nothing. Perhaps this is an issue related to positioning? I've
tried various positioning schemes with no luck -- and at this point
I'm just lost. Any other ideas?

Why a tinyurl?

Because I don't want the URL to be floating around unnecessarily.
Didn't mean to scare anybody -- sorry.

just wanted to point out that it took nearly a minute for your page to load here, and during that time, the content appeared as dark blue and gray on a dark gray background, resulting in near invisibility.

Thanks for mentioning that. There are other performance issues that
still need to be resolved and I'll get to them, but this is unrelated
to the z-index issue, which is my top priority.

zackisaiah (AT) hotmail (DOT) com wrote:

To whom are you responding? Who're the quotes below from? Please include
attributions when you quote.

Give the owner of the dropdown the same z-index as the dropdown.


[...] Perhaps this is an issue related to positioning? I've
tried various positioning schemes with no luck -- and at this point
I'm just lost. Any other ideas?

Sorry, can't help you here. I've never succeeded in my attempts to do
cross-browser drop-down navbars, and I don't like navigation that
depends on JS to work. But does the term "son-of-suckerfish" help you
any (since I've oft seen it recommended)?

Why a tinyurl?

Because I don't want the URL to be floating around unnecessarily.
Didn't mean to scare anybody -- sorry.

In future, you could include the "preview" part of the URL, as in
http://preview.tinyurl.com/c9mfkc

With a URL like this I would have clicked on at least the TinyURL, and
then possibly decided to go to your site.

--
John
Pondering the value of the UIP: http://improve-usenet.org/

I've fixed the drop-down issue. The solution was to bring the whole
navigation div out of the header div completely.

Sidenote: I'll make sure I never commit those sins of improper message-
posting etiquette ever again. How extremely foolish of me!!



On Mar 19, 8:58*pm, John Hosking <J... (AT) DELETE (DOT) Hosking.name.INVALID>
wrote:

zackisa... (AT) hotmail (DOT) com wrote:

To whom are you responding? Who're the quotes below from? Please include
attributions when you quote.

Give the owner of the dropdown the same z-index as the dropdown.

[...] Perhaps this is an issue related to positioning? I've
tried various positioning schemes with no luck -- and at this point
I'm just lost. Any other ideas?

Sorry, can't help you here. I've never succeeded in my attempts to do
cross-browser drop-down navbars, and I don't like navigation that
depends on JS to work. But does the term "son-of-suckerfish" help you
any (since I've oft seen it recommended)?



Why a tinyurl?

Because I don't want the URL to be floating around unnecessarily.
Didn't mean to scare anybody -- sorry.

In future, you could include the "preview" part of the URL, as inhttp://preview.tinyurl.com/c9mfkc

With a URL like this I would have clicked on at least the TinyURL, and
then possibly decided to go to your site.

--
John
Pondering the value of the UIP:http://improve-usenet.org/

In article
<18008ac9-085d-4352-a0af-fa8266e34f9f (AT) z16g2000prd (DOT) googlegroups.com>,
zackisaiah (AT) hotmail (DOT) com wrote:

I've fixed the drop-down issue. The solution was to bring the whole
navigation div out of the header div completely.

Sidenote: I'll make sure I never commit those sins of improper message-
posting etiquette ever again. How extremely foolish of me!!

Please don't top post. <g>

--
dorayme