Internet explorer 8 error and mega menus

hello,

I have a problem with joomla mega menu, it works great with firefox, opera, safari and chrome but when we come to Internet explorer 8 it some times dropdown and sometimes not.

I am so out of solutions and tried all the Internet compatibility modes, but none works with it

Urgent please, thanks

Mega menu css code;


.ja-megamenu { margin: 0; padding: 0; }
.ja-megamenu a.over, .ja-megamenu a.active { color: #ffffff !important; }

/* lv - 0
-----------------------------------*/
/* Styling ---*/
ul.level0 {
	float: left;
	margin: 0;
	padding: 0;
}

ul.level0 li.mega {
	background: none;
	display: block;
	float: left;
	margin: 0 0 0 10px;
	padding: 0;
}

ul.level0 li.first {
	margin: 0;
}

ul.level0 li.mega a.mega {
	background: url(../../images/nav-bg.gif) no-repeat left top;
	color: #999;
	display: block;
	font-weight: bold;
	line-height: normal;
	margin: 0;
	padding: 0 0 0 10px;
	text-decoration: none;
}

ul.level0 li.mega a.mega span {
	background: url(../../images/nav-bg.gif) no-repeat right top;
	display: block;
	line-height: 28px;
	padding: 0 10px 0 0;
}

ul.level0 li.over a.mega,
ul.level0 li.over a.mega,
ul.level0 li.over a.mega {
	background: url(../../images/nav-active-bg.gif) no-repeat left top;
	color: #fff;
}

ul.level0 li.over a.mega span,
ul.level0 li.over a.mega span,
ul.level0 li.over a.mega span {
	background: url(../../images/nav-active-bg.gif) no-repeat right top;
}

ul.level0 li.haschild-over a.mega {
	background: url(../../images/nav-active-bg.gif) no-repeat left top;
	color: #fff;
}

ul.level0 li.haschild-over a.mega span {
	background: url(../../images/nav-active-bg.gif) no-repeat right top;
}

ul.level0 li.haschild a.mega span {
	background: url(../../images/nav-bg.gif) no-repeat right top;
}

ul.level0 li.active a.mega {
	background: url(../../images/nav-active-bg.gif) no-repeat left top;
	color: #fff;
}

ul.level0 li.active a.mega span {
	background: url(../../images/nav-active-bg.gif) no-repeat right top;
}

/* lv - 1 and below
-----------------------------------*/
/* Layout ---*/
.ja-megamenu li.mega .childcontent { display: block; height: auto; position: absolute; }

.ja-megamenu li.mega .childcontent,
.ja-megamenu li.haschild-over li.mega .childcontent,
.ja-megamenu li.mega li.haschild-over li.mega .childcontent ,
.ja-megamenu li.mega li.mega li.haschild-over li.mega .childcontent,
.ja-megamenu li.mega li.mega li.mega li.haschild-over li.mega .childcontent,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over li.mega .childcontent { left: -999em; /*hide the menu*/ }

.ja-megamenu li.haschild-over .childcontent,
.ja-megamenu li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.mega li.mega li.haschild-over .childcontent { left: auto; /*show on parent:hover*/ }

ul.level1 li.mega { float: none; width: 180px; }

ul.level1 .childcontent { margin: -2em 0 0 160px; }

 /* Columns ---*/
.megacol { float: left; }
.cols1 .megacol { width: 100%; }
.cols2 .megacol { width: 50%; }
.cols3 .megacol { width: 33.3%; }
.cols4 .megacol { width: 25%; }
.cols5 .megacol { width: 20%; }
.cols6 .megacol { width: 16.6%; }
.cols7 .megacol { width: 14.2%; }
.cols8 .megacol { width: 12.5%; }
.cols9 .megacol { width: 11.1%; }
.cols10 .megacol { width: 10%; }

.ja-megamenu .cols1 { width: 200px; }
.ja-megamenu .cols2 { width: 400px; }
.ja-megamenu .cols3 { width: 600px; }
.ja-megamenu .cols4 { width: 800px; }
.ja-megamenu .cols5 { width: 1000px; }
.ja-megamenu .cols6 { width: 1200px; }
.ja-megamenu .cols7 { width: 1400px; }
.ja-megamenu .cols8 { width: 1800px; }
.ja-megamenu .cols9 { width: 2000px; }
.ja-megamenu .cols10 { width: 2200px; }

/* Styling ---*/
ul.level1 li.mega {
	border-bottom: 1px solid #353535;
	margin: 0;
	padding: 0;
}

ul.level1 li.first { border-top: 0; }

ul.level1 li.mega a.mega {
	background: none;
	border: 0;
	color: #999;
	font-weight: normal;
	padding: 0;
}

 ul.level1 li.mega a.mega span { background: none; padding: 0; }

 ul.level1 li.haschild {
	background: url(../../images/arrow.gif) no-repeat 95% center;
	padding: 0;
}

ul.level1 li.over a.mega, ul.level1 li.haschild-over a.mega { color: #fff !important; }

ul.level1 li.active a.mega { color: #fff !important; font-weight: bold; }

ul.level1 li.module { background: none; }

ul.level2 li.mega a.mega { color: #999 !important; }

ul.level2 li.mega a.over { color: #fff !important; }

 /* CHILD CONTENT
-----------------------------------*/
.childcontent {
	background: url(../../images/arrow-up.gif) no-repeat 10px 1px;
	color: #999;
	padding-top: 6px;
	z-index: 999;
	elevation:above;
}

.childcontent-inner {
	background: #2f2f2f;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.childcontent ul.megamenu { margin: 10px; }

.childcontent .ja-moduletable {
	background: #2f2f2f;
	color: #ccc;
	border-bottom: 0;
	line-height: 1.5;
	margin: 10px 0;
	padding: 0;
	width: 180px;
}

.childcontent .ja-moduletable h3 {
	background: none;
	color: #fff;
	border-bottom: 1px solid #444;
	margin-left: 10px;
	margin-right: 10px;
}

.childcontent .ja-moduletable .ja-box-ct {
	padding: 0 10px;
}

.childcontent .ja-moduletable a {
	color: #ccc;
	text-decoration: none;
	border-bottom: 1px dotted #ccc;
}

.childcontent .ja-moduletable a:hover,
.childcontent .ja-moduletable a:focus,
.childcontent .ja-moduletable a:active {
	display:visible;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid #fff;
}

.childcontent .ja-moduletable ul:first-child {
	margin-top: 0 !important;
}

.childcontent .ja-moduletable li {
	background: url(../../images/bullet2.gif) no-repeat 2px 7px !important;
	margin-bottom: 5px;
}

/* reset */
.childcontent ul.megamenu .ja-moduletable,
.childcontent ul.megamenu .ja-moduletable .ja-box-ct {
	margin: 0;
	padding: 0;
}

.childcontent ul.megamenu .ja-moduletable h3 {
	margin-left: 0;
	margin-right: 0;
}


Hi, Welcome to Sitepoint :slight_smile:

Can I have fries html with that please :slight_smile: (or a link).

Lol, Thank you for your reply :slight_smile:

it’s http://212.103.160.157/~howtobea

Hi,

This probably won;t be much help but the first thing I notice is that there is a JS error message in IE8.

Message: Invalid argument.
Line: 27
Char: 199
Code: 0
URI: http://212.103.160.157/~howtobea/media/system/js/mootools.js

I’m not sure if that’s an issue or not but it would be worth isolating it from the code to see if it is a problem.

However the menus seem to be working in IE8 eventually. It seems they have to wait for stuff to load on some pages.

I’m not surprised that there may be issues as there are a lot of rather large errors in the page.

There seems to be something odd being placed between table elements here which is not allowed.


    <table border="0">
                                                               [B] <span style="font-family: &amp;amp;amp;"> </span><span style="font-family: &amp;amp;amp;"> </span><span style="font-family: &amp;amp;amp;"> </span>[/B]
                                                                <tbody>
                                                            [B]    <span style="font-family: &amp;amp;amp;"> </span><span style="font-family: &amp;amp;amp;"> </span><span style="font-family: &amp;amp;amp;"> </span>
                                                               [/B] <tr>[B] <span style="font-family: &amp;amp;amp;"> </span><span style="font-family: &amp;amp;amp;"> </span><span style="font-family: &amp;amp;amp;"> </span>[/B]

Nothing can come between those tags as you can only have content inside the td tag in a table.

There is a similar problem here with elements in-between the list elements.


<div class="ja-box-ct clearfix">
                                <ol>
                                    <li><span style="color: #888888;"><a href="/~howtobea/index.php?option=com_content&amp;view=article&amp;id=199&amp;Itemid=372"><span style="color: #ffffff;">Ansoff&#8217;s Matrix (Growth Strategy)</span></a></span></li>
                                    [B]<span style="color: #ffffff;"> </span>[/B]
                                    <li><span style="color: #888888;"><a href=

That span is not allowed there as all content must be inside the list pair.

A single missing tag in IE8 can cause the page not to display properly but unfortunately you have 159 of them so I can’t easily test if they are an issue or not.

What I would suggest you do if you can’t get the code into some sort of valid state is to make a stand alone menu and check that it is working as you expect in the basic version first. If the issue persists then we can look at the menu code and try to isolate the problem.

It could be a simple issue causing the display problem so someone else may be able to spot it but usually I only start debugging once the code is as valid as it can be. Some validation errors won’t matter but missing and unclosed tags must be fixed at all costs.

opps, that’s a lot of validation errors that must be fixed right a way :frowning:

but are you sure that these validation errors causing the mega menus not to work in IE8? as when I switch the menus to css menus it works, but the problem i am facing in here is while the drop down menu is in a good position in the IE8 but it covers the main menu in firefox, is there any way to separate the menus CSS in the IE from the one for firefox browser ?

you can have a look again on the link, I switched the main menu to the CSS menu.

Thanks a lot for your precious help.

#ja-cssmenu ul {
	margin: 0; /* all lists */
	padding: 0;
}

Hi,
I’m a little confused as we were talking about Ie8 and now it’s Firefox that has changed :slight_smile:
You can move the menu down in Firefox by applying a top value here


#ja-cssmenu li ul {
height:auto;
left:-999em;
position:absolute;
[B]top:3em;[/B]
width:15.9em;
z-index:99;


}





That should put it in the same place in both browsers.

I’ve been trying for some time to get a working example going locally but the millions of css file and js files make it almost impossible to get anything useful going. (I like to debug on a working example as it’s much easier to see what’s going on.)

The site seems to be displaying in IE8 for me ok so is the problem you are seeing that the drop downs aren’t working or are they misplaced or just occasionally sticking?

Wohooooo, It works like a charm, you are a genius :slight_smile:

No, I have been using mega menu that wasn’t working properly in the IE8. Then I switched to a regular CSS menu that wasn’t showing in the right position in Firefox :slight_smile:

Really You have been a GREAT help, Thanks a million :slight_smile: :slight_smile:

can I have another inquiry please? :rolleyes:

in IE , in the top menu, when hover the “more” menu item to get to the submenu, i can’t reach to click any of the submenu’s items.

It works Great in Firefox but that just happens with IE

I really appreciate you help :slight_smile:
Thank you in advance,

/* For IE compatibility */
body {
	behavior: url('csshover3.htc');
}

div.css_menu ul {
	list-style: none;
	margin: 0px;
	padding: 0 0 0 0;
}

div.css_menu ul li {
	float: left;
	margin: 0px;
	padding: 0 4px 0 0;
	border: 1px solid none;
	background-color:none;
	
}

div.css_menu ul li a {
	display: block;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}

div.css_menu ul li div.css_submenu {
	position: absolute;
	top:1em;
	z-index:99;
	display: none;
}

div.css_menu ul li:hover div.css_submenu {
	display: block;
}

div.css_menu ul li div.css_submenu ul {
	list-style: none;
	position: relative;
	top: 5px;
	left: -170px;
	margin: 0px;
	padding: 0px;
	border: 4px solid #101010;
	background-color: #101010;
}

div.css_menu ul li div.css_submenu ul li {
	float: none;
	margin: 2px 0px 0px 0px;
	padding: 0px;
	border: none;
	background:#101010;
}

div.css_menu ul li div.css_submenu ul li:first-child {
	margin: 0px;
	background:#101010;
}

Hi,

I don’t know if this will help as it’s hard to test but using the develpoper tools in iE8 it seems that setting a width on the ul helps to keep it in place.

e.g.


div.css_menu ul ul{width:250px}


Worth a try anyway.