Wesley Lamont wrote: > Heya, > > This last bug is killing me. I've been bashing away at it over the > weekend to no avail. > > The Main menu drop down functionality is flawed in IE6(win) and > possibly other IE's as well. The visual appearance is solved via > giving the ancestors blocks a position and z-index as I explained in > a previous post. However the functionality of the drop down menu's > stops functioning when the cursor is above the content block whilst > still remaining in the menu. This still appears to be a Z-index issue > despite the menu visually functioning correctly. The menu items only > appear to create style changes upon the text only and not the entire > block. > > From the Microsoft website: Input from controlling devides does not > penetrate overlapping elements even if the elements are no visible. > Which is the issue here. There are no elements overlapping the menu > but something in IE rendering stream is or thinks it is. > > The website can be found here: > http://www.newearthpermaculture.com.au/bm/BusMentorMenu27blank.htm > > > I've added all the work I've done on this problem below any any help > is GREATLY appreciated. > > Regards > > Wesley Lamont > > > > > > > There is two elements to this problem both related. The first is the > main menu sitting ontop of the top bar. The bar is absolutely > positioned z-indexed at -600. The menu ancestry is relative > positioned at z-index 500 code-ordered after the bar in both html and > css code. The li of the main menu only function on the text of the > 'a' element within the block not on the entire 'li' as standards > suggest. > This I have proven by removing the bar and functionality is fine for > top level of the menu. Here are the tests I've tried so far: > - Drop the bar below the menu in html code and apply top:0 > - set bar at absolute -9999 z-index > - set barmid (central section of bar) @ absolute -9999, top:0 > - Move bar to top again, change absolute to relative, add top to menu > section to overlap once again > - Make menu absolute > - make menu absolute and position above bar again. > - removed positioning on bar completely > > Even with the menu and bar with absolute positioning both or relative > position and extreme opposite z-indexes I still can't achieve > functionality correctly. > > The second problem is the failure of the dropdown to sustain sfhover > class change when the cursor moves above the content area. Movement > above this area drop the menu completely rendering all lower menu > items unreachable. Despite visually appearing above everything the > functionality still claims the menu to be behind something. attempts > so far (well ones I can remember) > - dropped parent z-index in case both were inheriting the same value. > - Added "menu * {pos:relative, z-index: 500]" > - added borders to see if any of the menu blocks was rendering > visually under the content > http://www.newearthpermaculture.com.au/bm/BusMentorMenu28blank.htm > > After even more tests while writing this: > It seems the text of the drop down menus still appears functional > above everything similar to the main menu. elsewhere on the block > fails to keep the sfhover class change. Interestingly the entire > block still triggers the sub menus to appear even if it then fails > above the content block. > > The border test in 28 also show how the borders appear to function > above the content block as well.
Hi Wesley You are pandering to IE and especially IE6. This type of menu is best done first to work correct in Firefox or Opera, then a check in IE7, then lastly IE6. I have copied your code and made a few changes. <http://css-class.com/x/BusMentorMenu.htm> Does the menu now function in IE6? I can not check if it does. If it does, then it should function in most browsers. At this point I want you to disregard the differences between the browsers since they are due to me altering the code and CSS. When I do so it exposes, the conflicting rules. When I had the menu functioning in Firefox, I then noticed that the main menu was vertical in IE7. This was caused by the img drop shadows. The fix was to removes the floats (yes at one point I made this change for the images) with this rule. .drop { height:0.5em; float:left;margin-bottom:-1000px;margin-right:-1000px;} Please note that every z-index has been removed from the CSS. This indeed would explain some of IE6 behavior. I have removed many of the position:relative; The navigation element which you had is now effectively a container for everything below the header. I have now absolutely positioned the menu with it's own containers to be above the background (below the header) and since the menu now appears last in the source, it is layered higher then the content menu. I would not recommend using ems as widths or in the margins. Hope it helps. BTW, Please note that I have sent Opera crazy, the dropshadows I see. This I will attempt to fix with this menu demo. <http://css-class.com/articles/ursidae/menu1.htm> Kind Regards, Alan http://css-class.com/ ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
