Unread 10-01-2008, 02:25 PM
gosdest gosdest is offline
Junior Member
Join Date: Sep 2008
Location: Brussels
Posts: 3
  #1  
Smile Fixed (see second post): Dropdown menus disappear under images in IE7

One of my sites uses an on-click image menu which is fine in IE6 and FF3, Opera etc., but now, in IE7 (only IE7 as far as I know) the menus appear under the images instead of on top - so they are fairly useless.

I have tried increasing the z order to 10000 in um.orientation but this does not help.

The site is http://ec.europa.eu/research/star/index_en.cfm?p=6

Any solutions?

Last edited by gosdest : 10-07-2008 at 02:10 PM. Reason: Problem resolved, but may be useful for others and for UDM documentation.
Reply With Quote
Unread 10-07-2008, 02:08 PM
gosdest gosdest is offline
Junior Member
Join Date: Sep 2008
Location: Brussels
Posts: 3
  #2  
Smile Fix found, I think!

Having read about similar problems elsewhere, I added a z-index to each main <li> tag of the menu, using decreasing values so that the top item can overlay the lower ones and so on.

Example:

<ul id="udm" class="udm">

<li class="onclick" id="agrifood" style="z-index:10000"><a id="agrifoodButton" class="navButton" href="index_en.cfm?p=zz_sitemap#agrifood" name="agrifood" title="Click for projects in the area of
Agriculture and Food"><span></span>Agriculture & Food</a>

<ul>
<li ><a href="index_en.cfm?p=61" title="Biotech advances in wine production">Biotech advances in wine production</a> </li>
<li><a href="index_en.cfm?p=63" title="Crusts, Crumbs and Chromatography">Crusts, Crumbs and Chromatography</a> </li>
<li><a href="index_en.cfm?p=64" title="Food allergies">Food allergies</a> </li>
</ul>
</li>

<li class="onclick" id="education" style="z-index:9900"><a id="educationButton" class="navButton" href="index_en.cfm?p=00_intro" name="education" title="Click for projects in the area of Education"><span></span>Education</a>
<ul>
<li><a href="index_en.cfm?p=03_intro" title="PANS">Public awareness of nuclear science</a> </li>
<li><a href="index_en.cfm?p=07" title="Serious games">Serious games</a></li>
</ul>
</li>
</ul>

I tried the z-index in the id but this did not work, indeed it made things worse in other browsers, hence the use of style in each line here, which works for IE7 and does not harm IE6, Firefox or Opera. I've yet to try Chrome.
Reply With Quote
Unread 11-06-2008, 06:47 PM
colech colech is offline
Junior Member
Join Date: Nov 2008
Posts: 20
  #3  
Default

Have you tried setting the z-index on any containing div outside <ul class="udm">?
Reply With Quote
Unread 11-07-2008, 08:31 AM
gosdest gosdest is offline
Junior Member
Join Date: Sep 2008
Location: Brussels
Posts: 3
  #4  
Default Reply to Colech

Quote:
Originally Posted by colech View Post
Have you tried setting the z-index on any containing div outside <ul class="udm">?
Thanks for the suggestion - in fact I found a solution and posted it in the thread above some time ago. what I did was this: I added a z-index to each main <li> tag of the menu, using decreasing values so that the top item can overlay the lower ones and so on. That works!
Reply With Quote
Unread 11-19-2008, 12:50 AM
colech colech is offline
Junior Member
Join Date: Nov 2008
Posts: 20
  #5  
Default

Quote:
Originally Posted by gosdest View Post
Thanks for the suggestion - in fact I found a solution and posted it in the thread above some time ago. what I did was this: I added a z-index to each main <li> tag of the menu, using decreasing values so that the top item can overlay the lower ones and so on. That works!
I've had the same problem, but here is the much easier way to get it to work. There are a lot less chance of error doing it this way. Let me know if it doesn't work for you...

The CSS:
Code:
.mainMenu {
  z-index:10000;
}
The HTML:
Code:
<div id="mainMenu">
  <ul class="udm" id="udm">
    <li>
      ...
    </li>
  </ul>
</div>
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 06:18 AM.


Powered by vBulletin® Version 3.0.1
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.