Joomla Templates Club 406,261 posts

[SP Media Friend SP MediaJoin date: September 2014Posts: 477Downloads:0Uploads:12 Thanks: 38 Thanked: 70 times in 27 posts]

#142364

If there are child menus, the menu doesnt display correctly, with the text on the main child going back to grey, despite the sub child being active?

I can’t see how to fix it… 🙁

The container border issue is in IE7, which seems to fade out – it doesnt look anything like what it does in firefox.

I’ve attached a screenshot of both, the border issue is present on the Ja-Mica demo on JA.

---

Attachments:

1. 
2. 

[SP Media Friend SP MediaJoin date: September 2014Posts: 477Downloads:0Uploads:12 Thanks: 38 Thanked: 70 times in 27 posts]

#309765

Does anyone have any idea?

[SP Media Friend SP MediaJoin date: September 2014Posts: 477Downloads:0Uploads:12 Thanks: 38 Thanked: 70 times in 27 posts]

#309892

Hello? Anybody?

[bennitos Friend bennitosJoin date: May 2008Posts: 1717Downloads:0Uploads:39 Thanks: 39 Thanked: 474 times in 407 posts]

#309894

is it possible you pm me a url?, will have a go 🙂

1 user says Thank You to bennitos for this useful post

1. SP Media

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#309983

Hi SP, I’ve had a look at the site, Bennitos gave me the link…

Near the end of /templates/ja_mica/ja_menus/ja_moomenu/ja.moomenu.css find the following and add in the bit I’ve show in red.

#ja-cssmenu li ul a:hover,
#ja-cssmenu li ul a:active,
#ja-cssmenu li ul a:focus,
#ja-cssmenu ul li:hover,
#ja-cssmenu ul li.sfhover,
#ja-cssmenu ul li.havesubchildsfhover,
#ja-cssmenu ul li.havesubchildsfhover a,
#ja-cssmenu ul li.havesubchild-activesfhover,
#ja-cssmenu ul ul li:hover,
#ja-cssmenu ul ul li.sfhover,
#ja-cssmenu ul ul li.havesubchildsfhover,
#ja-cssmenu ul ul li.havesubchild-activesfhover {
background: #454545 !important;
color: #FFFFFF !important;
}
The border problem is the usual problem of Internet Explorer being unable to handle .png’s correct. To be honest the easiest fix is to replace the png with a solid colour.

EDIT: JA use a 1x1px transparent .png for this border (background) which only seems to cause this ‘fade’ bug in some versions of IE7. I’ve read that resizing the image to 10×10 will fix the problem but I haven’t tried it. The image is located at /templates/ja_mica/images/trans-bg.png if you want to give it a try.

EDIT2: Just tried the above suggestion and it works. Note to JA : No more 1×1 .png’s!!

1 user says Thank You to scotty for this useful post

1. SP Media

[SP Media Friend SP MediaJoin date: September 2014Posts: 477Downloads:0Uploads:12 Thanks: 38 Thanked: 70 times in 27 posts]

#309984

I’ll give that a shot and will let you know how I get on! 🙂

[SP Media Friend SP MediaJoin date: September 2014Posts: 477Downloads:0Uploads:12 Thanks: 38 Thanked: 70 times in 27 posts]

#309985

Thank you scotty/bennitos, it works absolutely wonderfully. /hats off

[bennitos Friend bennitosJoin date: May 2008Posts: 1717Downloads:0Uploads:39 Thanks: 39 Thanked: 474 times in 407 posts]

#310005

nice work there scotty 🙂

1 user says Thank You to bennitos for this useful post

1. SP Media

[SP Media Friend SP MediaJoin date: September 2014Posts: 477Downloads:0Uploads:12 Thanks: 38 Thanked: 70 times in 27 posts]

#310041

Ouch, when you select a subnav, it highlights all of them lol!!!

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#310072

Darn! I’ll have another look but I think it’s a bug in the moomenu js because the <li> (the black box) is keeping the style and it’s only the <a> (the actual text) that isn’t. I don’t know a lot about js or moo so may not be able to help further but I’ll certainly have a look.

1 user says Thank You to scotty for this useful post

1. SP Media

[SP Media Friend SP MediaJoin date: September 2014Posts: 477Downloads:0Uploads:12 Thanks: 38 Thanked: 70 times in 27 posts]

#310096

The whole thing has just baffled me. Wondering if it’s a bug present throughout all the templates with Moo installed.

I’m stunned that there’s been no response by JA – this thread was marked as help needed by mods/admin… :confused:

[SP Media Friend SP MediaJoin date: September 2014Posts: 477Downloads:0Uploads:12 Thanks: 38 Thanked: 70 times in 27 posts]

#310099

I’ve found that it actually happens in the CSS menu too :S

[SP Media Friend SP MediaJoin date: September 2014Posts: 477Downloads:0Uploads:12 Thanks: 38 Thanked: 70 times in 27 posts]

#313490

I’ve finally managed to resolve this. For anyone else who comes across this issue, replace the section below;

/* STYLING THE MENU
-----------------------------------*/

With

/* 1st level */
#ja-cssmenu li a {
color:#858585;
display:block;
font-size:92%;
text-decoration:none;
text-transform:uppercase;
}

#ja-cssmenu li a span {
display: block;
padding: 8px 15px 8px;
}

#ja-cssmenu li.havechild a:hover,
#ja-cssmenu li.havechild a:active,
#ja-cssmenu li.havechild a:focus,
#ja-cssmenu li:hover a {
background: #FFFFFF url(../../images/bg_navi.gif) repeat-x center top;
color: #454545;
}

#ja-cssmenu li.havechild li a:hover,
#ja-cssmenu li.havechild li a:active,
#ja-cssmenu li.havechild li a:focus,
#ja-cssmenu li:hover li a {
background: none;
}

#ja-cssmenu li:hover,
#ja-cssmenu li.sfhover,
#ja-cssmenu li.havechildsfhover,
#ja-cssmenu li.havechild-activesfhover {
background: #FFFFFF url(../../images/bg_navi.gif) repeat-x center top;
color: #454545;
}

#ja-cssmenu li a.active,
#ja-cssmenu li a.active:hover,
#ja-cssmenu li a.active:active,
#ja-cssmenu li a.active:focus {
background: #FFFFFF url(../../images/bg_navi.gif) repeat-x center top;
color: #454545;
}

/* 2nd level and above */
#ja-cssmenu li ul {
background: #FFFFFF;
border: 1px solid #F2F2F2;
border-top: none;
}

#ja-cssmenu li ul li {
background: none;
border: none;
border-bottom: 1px solid #F2F2F2;
}

#ja-cssmenu li ul li.last-item {
border-bottom: none;
}

#ja-cssmenu li ul li span {
padding: 0;
}

#ja-cssmenu li ul a {
background: none !important;
border: none;
color: #454545 !important;
font-weight: normal;
font-size: 92%;
line-height: normal;
margin: 0;
padding: 8px 10px;
text-transform: none;
white-space: nowrap;
}

#ja-cssmenu li.havesubchild,
#ja-cssmenu li.havesubchild-active {
background: url(../../images/arrow.png) no-repeat 95% 50%;
}

#ja-cssmenu li li a.sfhover,
#ja-cssmenu li ul a:hover,
#ja-cssmenu li ul a:active,
#ja-cssmenu li ul a:focus,
#ja-cssmenu ul li:hover,
#ja-cssmenu ul li.sfhover,
#ja-cssmenu ul li.havesubchildsfhover,
#ja-cssmenu ul li.havesubchild-activesfhover,
#ja-cssmenu ul ul li:hover,
#ja-cssmenu ul ul li.sfhover,
#ja-cssmenu ul ul li.havesubchildsfhover,
#ja-cssmenu ul ul li.havesubchild-activesfhover {
background: #454545;
color: #ffffff !important;
}

#ja-cssmenu ul li a.active {
background: none !important;
color: #cc3300 !important;
font-weight: normal !important;
}

#ja-cssmenu ul li a.active:hover,
#ja-cssmenu ul li a.active:active,
#ja-cssmenu ul li a.active:focus {
color: #ffffff !important;
}

#ja-cssmenu li li:hover > a {
background: #454545;
color: #ffffff !important;
}

[Author]

Posts