[SOLVED] Menu incompatability with IE8 and 9

I have recently installed OC ver 1.5.2.1 (clean install) and it is magnificent, my thanks to all who have developed, supported and bug fixed it. Checked it through Mozilla ver 12 and Google Chrome - everything great. Had someone inform me that on IE9 he couldn't see what I was raving about and, when I checked on IE8 I could see what he meant, the menu has gone to pot in IE.

I have attached images below to show the problem.


Above is the Mozilla image, everything looks sweet as a nut with the menu


Above is where the satan, Microsoft, waltzed in and destroyed my elation

The cart address is http://wicanspirit.co.uk/cart1/index.ph ... ommon/home

Can anyone suggest a solution to this problem please? I've hunted through the forum trying to see if there is a solution but haven't found it yet. I suspect you are likely going to say it is a stylesheet.css issue but whether the fix can be applied directly to stylesheet.css or if it needs to go into a separate ie8.css I do not know. If you agree it is the stylesheet I can post the code in my .css although it is untouched from the default install with the exception of making a text colour change to some of the wording such as the Wishlist/Shopping Cart etc

I hope somebody can suggest a solution for this or do I take the ethos that, hopefully, more people use any other browser than IE and the fact it does not work correctly in IE will not reflect badly on the image of our cottage industry?

I had similar problems in v1.5.1.3. Don't know if the situation is the same in 1.5.2, but the reason was that there were separate stylesheets for IE6 and IE7 along with conditional includes in the header template for these. But there was no include and no stylesheet for IE8 or IE9. So it would default back to just the IE6 stylesheet.

My solution was to make a copy of the IE7 stylesheet, rename it to ie8.css and upload it to the same folder. Then edit
catalog/view/theme/default/template/common/header.tpl
Where you see: add above it: The reason you need to create a new file, rather than just making it check for greater than IE7, is because there are other oddities in IE8/9, and you may need to make specific css changes for them.
The above just handles IE8. You would need to repeat it for IE9.

Thank you granddaddy. I did as you instructed and, unfortunately, it still made no difference when I refreshed the page in IE 8. Can you refine the suggestion in any way or does anyone else have any ideas how to solve this problem please? I am desperate to get this shop open and do not wish to have to look elsewhere for a cart as I love the look and functionality of OpenCart.

Sorry... there was an extra edit that needs to be done. The css classes for the menu use a notation that is not recognised by IE8/9. Oddly enough, the rest of the css file classes don't use this 'faulty' notation, so it's only the menu that needs to be corrected:

Open the main css file:
catalog/view/theme/default/stylesheet/stylesheet.css

Go down to the MENU classes, you will see many entries that have a '>' in them. All these symbols need to be removed so that there is just one space between the words instead of 'space>space'. Note that some have more than one > in them. Edit them carefully to only remove each > and the space after it.

For reference, these are the items you will find:
#menu > ul > li {
#menu > ul > li:hover {
#menu > ul > li > a {
#menu > ul > li > div {
#menu > ul > li:hover > div {
#menu > ul > li > div > ul {
#menu > ul > li ul + ul {
#menu > ul > li ul > li > a {
#menu > ul > li ul > li > a:hover {
#menu > ul > li > div > ul > li > a {

So they need to become:
#menu ul li {
#menu ul li:hover {
#menu ul li a {
#menu ul li div {
#menu ul li:hover div {
#menu ul li div ul {
#menu ul li ul + ul {
#menu ul li ul li a {
#menu ul li ul li a:hover {
#menu ul li div ul li a {

That should solve the problem.

Also, here's a useful way to quickly check the IE display for free (any IE version) and can be run in any browser. It gives you instant screenshots of your site, just select the IE version and input your site address:
http://netrenderer.com/

I appreciate your effort granddaddy. Did the modification and, regretably, it only partially works. The awful grey background with blue text has disappeared and the menu bar displays but with no dropdowns when you hover the mouse over them. Also, in Firefox the dropdowns now have greater space between the sub-categories. Seems, having used netrenderer and http://browsershots.org the initial problem only exists in IE and Avant. Can anyone help solve this conundrum please?

Looking further into it, the menu changes I suggested (without the >) are actually within the IE6.css but don't get applied to any IE version greater than that. Also, the attributes of those menu styles are slightly different from the ones in the main stylesheet.css.

To simplify it, we need to have an IE8.css and IE9.css that only contain the menu styles copied from IE6.css. In other words just to fix the thing that is malfunctioning (the menu) without copying anything else.

First, undo the changes you made in stylesheet.css (where you removed all the >). If you hadn't customised anything else, you can just restore the original file that was in the downloaded OC zip.

Then, keep the conditional code changes in the header.tpl, but open the IE8.css/IE9.css and replace their entire contents with the following (styles copied exactly from IE6.css).
(This assumes you are using version 1.5.1.3. If you are using another version, you may need to open IE6.css yourself and copy the menu section out, in case it is different.)
This may or may not work, but the principle is that IE6 had a fix - and you're now applying that same fix to just the IE versions that aren't working. The horizontal menus should now display, and if any aspect of the menu is still not correct (in IE8/9) you now have the ability to edit those styles by editing the IE8/9 files directly without affecting the menu styles in IE6 or other non-IE browsers.

Granddaddy, you are a gentleman and a scholar, the fix worked and I am a very happy man again, thank you. I did wonder why, when you said edit the stylesheet.css why it was being done there as we had created an ie8.css and ie9.css, it made sense that the edits should occur these new files - although the edits made in stylesheet.css were still being picked up - which brought into question if it was reading the correct file anyway or if I had made another blunder. Anyway, perfect, I truly appreciate you effort and support on this matter.

To anyone else, listen to this man, he knows what he is talking about.

Aww... you're making me blush. Just glad to help.