CSS Menu issue in IE7

[RachelF2]

One more reason not to like IE...

I have been working on this website for my former choir on and off for months on a volunteer basis. For now, it is at http://web.mac.com/rachelf2/PCC1/
It isn't perfect but it is significantly better than the old site. It is this close to being done but I am having an issue with a menu not displaying properly in IE. I found a drop down menu template/tutorial (CSS Drop Down Menu tutorial at www.tanfa.co.uk by Suzy Campbell) that I just barely understand. It does exactly what I want in Safari and Firefox and Whatever:hover (by Peter Nederlof) makes it almost do everything is supposed to do in IE. The problem is that, only in IE, the menus that drop down over the sidebar area are transparent for some reason (though not on mouseover.) Also, the first menu (Singers Center) "dies" after the third box. The menus work fine over the body section. Any ideas on how to fix this?

Also, just a note, I just downloaded the beta of IE 8 and this problem doesn't happen anymore. Not that this helps too much at this point.

 

[SrWebDeveloper]

That framework was written circa 2005 and uses numerous IE conditional CSS hacks as well as a third party .htc file which developers normally create to override and/or extend CSS default behavior, but in 2005 served to hack the menu system. The CSS validates, but clearly a framework this old isn't the way to go in 2008 when modern DOM oriented frameworks such as JQuery exist which eliminates the need to maintain the latest .htc file and reduce the number of IE hacks. My .02.

Below is an excellent menu system that does what you want, uses only one MSIE conditional to fix a height issue for a class selector, extends JQuery and even has arrows to inform the user when the accordian menu expands horizontally as well as down. You can make it look pretty to match your system, just a simple matter of editing the colors and images:

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_horizontal_blue/

There are 45 other plugins available here that use the reliable, DOM standardized JQuery framework if that's not right for you.

If someone else finds something obvious with the CSS the OP is using, feel free to make corrections. Note, the site itself fails HTML validation with about 38 errors, unrelated to the issues discussed above but the OP should be aware and resolve so their entire site renders properly across all modern platforms.

-jim

 

[RachelF2]

My coding had definitely gotten a little sloppy (I should have known someone was going to call me on it!) but it was mostly a case of using <br> instead of <br/>. I did just fix it up and now it validates fine. I'll do all the other pages tonight, but if I can figure it out on the home page, I can make it work everywhere.

I'll also try this other menu tonight if no one can figure out the problem with this one first. When I was first looking at menus, this was just the one I understood the best (probably because I learned HTML pre-2005) but I think this one looks similar enough that I just might be able to make it work.

 

[zlinuk]

Try removing the absolute positioning info from the sidebarindex element, floating it left and finetuning your positioning with a bit of top and left margin.

 

[RachelF2]

And the winner is....

Zlinuk!

How I came to the solution:
I duplicated part of my site and started working on replacing the menu with the menu SrWebDeveloper suggested. I was replacing a couple of things in the CSS as a time and verifying that it still did what I wanted it to do. As soon as I started playing with the Javascript (and realized I had no clue what I was doing,) trying to remove the time delay and the arrows, unsuccessfully I might add, I had the same transparent menu problem but in Safari as well. I decided to abandon that for now and try Zlinuk's solution and the problem was solved!

I am still using outdated code I know, but I need to learn a little bit more about Javascript so I can learn how to modify it to do what I want it to do (no arrows and no time delay.) I promise to learn that eventually, but for now, it works! Thanks for your help!

 

[memco]

I like the dropdowns here: http://htmldog.com/articles/suckerfish/. It is the successor to the menu you're using only it is more efficient, and more compatible. The article is pretty simple and might help you get a grasp for some of the newer techniques used.