Vertical Menu IE6 Problem

[asim]

Hi,

I edited a pre-existed menu in CMSMS, although I got my desired style in IE7 and FF, I'm having a complete nightmare in IE6 (well at least in my installation of it). The site can be found here: http://www.asimjanjua.com/admin/

Issues in IE6:

1. The horizontal divider line is missing from under "About Us" and above "Projects"
2. There are one too many vertical lines to the right of the navigation, it should be one vertical line running to the bottom of the menu (fading out at the bottom). The link that is active should have no right line.
3. Rollover effect not working on the links.
4. Sub menus are not rendering the same as IE7 and FF, they should be pinkish in colour, changing to black when the user rollovers them.

If your not seeing these peoblem in your version of IE6 please let me know and I can send screenshots. Any help would be much apprecaited.

Thanks.

[kermit]

i don't do ie7.. so i dunno if anything will break in it.. if so, move whatever does to conditionals or find a suitable hiding method or hack...


(#2) fixes 'double border' in ie6, doesn't affect firefox:

#menuwrapper {margin-right:-2px;}


(#4) fixes submenu in ie6 and closes the 'gap' a little (in ie6) between it and parent items which improves success rate at keeping submenu open when moving cursor from parent to child in ie6 (which was a problem i was having with the submenu)..

#primary-nav li ul li{margin-left:1px;}
#primary-nav li ul>li{margin-left:3px;}

#primary-nav li ul li a:hover,#primary-nav li ul li a:active {background:#222;margin-left:1px;width:115px;}
#primary-nav li ul li>a:hover {margin-left:0;}

the green lines use a hiding method to reset the values that goof up firefox back to the original values.. ie6 and below, and a few other browsers will ignore the green lines. i think ie7 will process them...


(#1) the following needs to be removed from ie6 styles to fix the 'missing borders' in the main menu block (menuparents):

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent,
#primary-nav li.menuparent:hover,
#primary-nav li.menuparenth {
  background-position: center right;
  background-repeat: no-repeat;
}

removal of these styles do not affect firefox... you can either move this block to your ie7 conditionals or try the child selector hiding method (used for the submenu, above)... 

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav>li.menuparent,
#primary-nav>li.menuparent:hover,
#primary-nav>li.menuparenth {
  background-position: center right;
  background-repeat: no-repeat;
}

unsure of what you meant on #3...  i didn't notice anything else broken in the menu or submenu once i applied the fixes here.

using ie6sp1 and firefox 2.0.0.1 on winxp here.. with the first two solutions tacked on to the end of the css and the last one done using the child selector hiding method (replacing the red block with the blue one in the css)...  menus work fine in both browsers.. you'll have to do your own testing in ie7, opera and whatever else is in your testing process....

these were a bugger.... where do i send your bill?

[asim]

Kermit,

Sorry for late reply. I have just implemented all your changes and they worked a dream in IE6, IE7 and FF, Opera, Safari.

Your a legend! Thanks a million.

Asim