[SOLVED] Menu focus in IE fix.

[13adger]

Hi
My apologies for asking a question which must have been asked many times before, but I've been unable to unearth it despite a lot of searching.

I'm building my first cmsms site, and am using a very basic menu, which I've styled in css. It all works beautifully, but the menu needs to work without a mouse, and I believe I do this using 'focus'?

In Chrome and Firefox the menu items change colour as they are tabbed, but not in IE. The menu seems to be working in IE in other respects - the hover function works fine when using a mouse.

I read in the Menu Manager Help section "For the cssmenu.tpl template to work in IE you must also insert a link to the JavaScript in the head section of the page template, which is necessary for the hover effect to work in IE." I don't know if this is the problem referred to, but can't find anywhere the specific code I need to enter. I have tried various bits of code from various templates with no success.

Please could someone spell out to me the code I need? I think if I'm having difficulty finding it, other 'beginners' will also be struggling, so I hope to help my fellow newbies.

Details in case you need them, I'm running verion 1.10.3,, IE 8 on Windows XP Professional. I'd rather not give a link to my site, but happy to give the code if you need it. (Although I'm pretty sure this is fairly standard, and you won't need to trawl through my code)

Thanks for your patience. Loving CMSMS so far.

13adger

[13adger]

Ok, so no replies yet. Either that means it's a very silly question, which people can't be bothered to answer, or it's a good question, which people can't answer? Or something else altogether?

Let me know if I should add anything else, to clarify my question and I will. If you aren't able to answer specifically how to solve this issue, could you please explain the IE issues that are referred to in the Menu Manager Help?

Many thanks

[Dr.CSS]

The JS adds an h on the end of the menu item class to trigger it to drop, only used for drop down fly out menus...

/* for fourth level add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.parenth ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
display: block;
}

[13adger]

Thanks Doc, I'm really sorry but I don't quite understand what I need to do, and where I need to add the h. (I am still a novice!) This is my code:

<div id="main_nav">
{menu loadprops=0 collapse='1'}
<!--main_nav--></div>

and my css:
#main_nav {width:150px; margin:100px 0px 0px 20px;}
#main_nav ul {list-style:none; margin:0; padding:0 ;width:150px; }
#main_nav li {border-top: 1px solid #fff; }
#main_nav li a {font-family:Tahoma, Geneva, sans-serif; font-size:.9em; text-decoration:none; display:block;}
#main_nav li a:link, #main_nav li a:visited {color:#ffffff; background-color: #660099; padding:.7em 0 .4em .6em;}
#main_nav li ul li a:link, #main_nav li ul li a:visited {margin-left:5px; background-color:#3F005E; }
#main_nav li a:hover, #main_nav li a.menuactive, #main_nav li a:focus {color: #fff; background-color:#333; padding:.7em 0 .4em .6em;}
#main_nav li ul li a:hover, #main_nav li ul li a.menuactive, #main_nav li ul li a:focus {color: #fff; background-color:#333; padding:.7em 0 .4em .6em;}

I believe I'm using an 'expanding' rather than drop-down or fly-out menu, so am not sure if it is still valid.

Could you also explain why the 'h' is required?

Thanks for your patience

13adger

[13adger]

I've finally found an answer after days of research!

Thanks to someone called Philippe, who posted this:

"Both the :focus and the :active pseudo-class are br0ken in IE.
:focus is simply not recognised.
:active is treated as if it were :focus.

The work around is then simple: style both the :focus and :active
pseudo-class the same way.
a:focus,
a:active {
/* styles */
}"