• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 958
  • Last Modified:

CSS dropdown z-index problem in IE7 (Extended menu for Joomla)

I previously asked the question below. The fix suggested worked to sort out the IE6 problem but unfortunately the fix made it so that IE7 does not display the drop down menus correctly - they go under the DIV "slogan_section".
The fix was to remove position:relative from .top_menu.
Any suggestions?

"I have a problem with 'Extended Menu' for joomla not working on IE6.
I have tried the :hover fix for IE6 with no success.
The menu does appear as a link (hand cursor) for a millisecond while the page loads but after that you cannot click on the menu titles.
I'm not too bothered about the drop-down bits of the menus working in IE6, as long as they can click on the menu titles.
The website is at www.caldicott.com
Many thanks in advance for any ideas."

1 Solution
It looks and works fine on my IE7 and FF3.
browswAuthor Commented:
Hi biyik,
I have just changed it back to keep the majority (IE7) happy. Just setting up a test site now...
My IE7 looks ok.

Before z-index can work, you have to have position:relative in the div. This means if you want the menu DIV to be on top, you need to have a position: relative otherwise z-index will not work.


It happens. But you may need a javascript fix. Check the website.


What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

browswAuthor Commented:
OK sorry - I was not very clear!

On the production site (www.caldicott.com) the drop-downs work fine in all browsers except IE6 which you cannot even click on the menu titles
CSS: in .top_menu there is position:relative

On the test site ( the dropdown menus work in FF,IE8 and the  titles (only) work in IE6 (fine), but in IE7 the menus are hidden behind the box below.
CSS: in .top_menu there is NOT position:relative - this was the previously suggested fix for IE6 but it breaks IE 7!!

Many, many thanks in advance your expertise.
David S.Commented:
Ah. IE5-7's weird z-index implementation strikes again.


#main_body ul li, .top_menu, .top_line { behavior: url(/new/templates/cycletheme/css/iepngfix.htc) }


#main_body ul li, .top_menu, .top_line { position:static; behavior: url(/new/templates/cycletheme/css/iepngfix.htc) }

And then remove the comment from around position:relative in the ".top_menu" rule.

Alternatively, instead of declaring position:static you could remove position:relative from #top_nav and apply the backgrounds to it instead.
browswAuthor Commented:
Kravimir - super advise as usual, but still not quite there:

if I add your position:static fix it makes the drop-down menus work in IE6, BUT the menus appear behind <DIV "slogan_section"> both in IE6 and IE7.

If remove the comment around position:relative in ".top_menu", the IE7 menu appear fine, but you cannot even click the menu titles in IE6!

I have left it is the first state; the production site is in the second state.

Any ideas?
Many thanks
browswAuthor Commented:
Hi everyone - really struggling for a solution to this one - any ideas or extra information I can give?
browswAuthor Commented:
OK I have nearly got this to work by putting the menu background into a seperate DIV. The only problem now is that the menu background is 'whited out' in IE6 (see to see what I mean?
Any ideas on how to fix this last issue?
browswAuthor Commented:
Sorted the final problem out by adding menu_back to the IE6 code:
#main_body ul li, .top_menu, .top_line, #menu_back { position:static; behavior: url....
Thanks everyone
browswAuthor Commented:
This was especially helpful:
browswAuthor Commented:
Thanks although this did not solve the problem it helped me on the way.
David S.Commented:
Congratulations on finding a solution to your problem and thanks for the points.

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now