Ultimate Web Site Drop Down Menu Forum

Ultimate Web Site Drop Down Menu Forum (http://www.udm4.com/forum/index.php)
-   Troubleshooting (http://www.udm4.com/forum/forumdisplay.php?f=12)
-   -   Dropdown menus disappear under images in IE7 (http://www.udm4.com/forum/showthread.php?t=2152)

gosdest 10-01-2008 02:25 PM

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?

gosdest 10-07-2008 02:08 PM

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.

colech 11-06-2008 06:47 PM

Have you tried setting the z-index on any containing div outside <ul class="udm">?

gosdest 11-07-2008 08:31 AM

Reply to Colech
 
Quote:

Originally Posted by colech (Post 5824)
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!

colech 11-19-2008 12:50 AM

Quote:

Originally Posted by gosdest (Post 5901)
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>



All times are GMT. The time now is 03:36 AM.

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