Horizontal navigation in IE7 - Advanced Store Customization - Beta

Welcome Guest

Zazzle Forum » Zazzle Public Forums » Advanced Store Customization - Beta » Horizontal navigation in IE7

Horizontal navigation in IE7

Print this topic

Previous Topic · Next Topic

My5k262

Posted: Friday, June 01, 2012 3:34:08 PM

Groups: ProSeller

Joined: 8/2/2011
Posts: 60

I am using the horizontal menu bar solution found here:
http://forum.zazzle.com/advanced/help_with_horizontal_navigation_bar_with_drop_down

It works great in Firefox and IE8. But, in IE7, the dropdown menu on the first category of my store ("techs and tees") appears behind the page content (this is the only navigation option with a second level).

The z-index on both ULs involved in the menu is set to 1000.

Anybody have any ideas? Would love some help.

You can see the menu in action here: http://www.zazzle.com/my5k262/

FWIW, the menu doesn't work in IE6 either, but that is somewhat expected. At least there, the dropdown part doesn't try to show at all so the site doesn't look like it is broken. This is okay since it's otherwise navigable.

OLPamPam

Posted: Sunday, June 03, 2012 8:21:06 AM

Groups: ProSeller

Joined: 7/5/2009
Posts: 301
Location: North Bay

I was talking to a web programmer and he said that z-index only goes to 100. He said just make sure the section that is covering it has a z-index below 100 and have your drop down be at 100. Let me know how it works out for you. I need to fix mine too and can't really test it cause I have a mac.

Not sure if that was just in reference to ie.

My5k262

Posted: Sunday, June 03, 2012 9:46:53 AM

Groups: ProSeller

Joined: 8/2/2011
Posts: 60

FWIW, z-index values can pretty much be HUGE so no issue there. That said, it turns out the ones we are talking about are irrelevant anyway.

Did some googling, and this is caused by an IE bug that was fixed in version 8. Details are here if you are interested: http://jonathanstegall.com/2009/01/15/ie-z-index-bug-with-css-dropdown-menu/

Here's a fix for the particular nav solution referenced in the first post.
1) Add an ID to your main navigation table:

Code:

2) Add the following to your styles:

Code:

#mainShell #horizontalNav {
  position: relative;
  z-index: 2;
}
#mainShell #main {
  position: relative;
}

3) That'll do it. You can remove the two "z-index:9000" references from the existing styles because it turns out they weren't doing much in this case anyway.

So far, I haven't find any unwanted side effects. Hope this works for you. Thanks for the original post on the navigation. Someday, I'll need to ask you how you made yours even better on your existing site. Looks great!

Users browsing this topic

Guest

Forum Jump

You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.