Top Bar displays badly in Internet Explorer

[Crystal Wizard]

My top bar displays badly in Internet Explorer.

It is fine in Google Chrome and Firefox.

 

Hopefully you can see, top left, the text is hidden behind the Logo, when it should be on a bar just below!

 

Any idea how I can fix this please?

[vekia]

is there any chance to check your website? I remember it but i don't remember the url

 

http://www.thecrystalwizard.co.uk/index.html this isn't prestashop store

[Crystal Wizard]

http://thecrystalwizard.co.uk/shop/

[vekia]

thanks

 

in the console it looks like problem with jCarousel, but im not sure at all

[Crystal Wizard]

I have viewed on 2 separate computers, and both display the same (as above) on IE, while they display correctly on Chrome.

I have no idea what jCarousel is! I am using the standard Top Horizontal Menu, with just a Link to the Tome (my blog) added.

 

[vekia]

it's a part of module, you've got it here:

 

 

can you for test purposes only disable this addon?

[Crystal Wizard]

OK, I have disabled the manufacturer carousel, and reload the page in IE.

It still displays the same.

 

I have noticed that I am getting "Only secure content is displayed" warning in IE - would this be related?

Edited August 27, 2013 by Crystal Wizard (see edit history)

[Crystal Wizard]

I have gone so far as to uninstall the Manufacturer Carousel, but am still getting the same (bad) display

[vekia]

yes, i checked it and the problem was there even if you removed the module. i suppose that problem is somewhere else, it is hard to say where, but as far as i remember here on forum exist several posts (probably solved) related to your issue

[Crystal Wizard]

I have searched the forum, but cannot find topics relating to this problem.

I have "reset" the Top Horizontal Menu, to no avail.

 

I can't really leave it like this, but would rather not have to remove the Menu completely.

Can anyone suggest what to try next?

[PascalVG]

Hi Crystal,

what IE version do you use to test it? It may have to do with the pseudo elements :before and :after, which IE6/7 doesn't support. These are used in the top horizontal menu

 

Can you try with IE8+ if it still has problems?

 

 

IF it doesn't have problems in IE8+, you can try to fix it like this:

edit file: themes/<your theme folder>/modules/blocktopmenu/blocktopmenu.tpl

(N.B. if you don't have this file here, COPY it to this place from /modules/blocktopmenu/blocktopmenu.tpl)

 

you see this code (or similar): (take out the red code)

{if $MENU != ''}

 

<!-- Menu -->

<div class="sf-contener clearfix">

<ul class="sf-menu clearfix">

{$MENU}

{if $MENU_SEARCH}

<li class="sf-search noBack" style="float:right">

<form id="searchbox" action="{$link->getPageLink('search')}" method="get">

<p>

<input type="hidden" name="controller" value="search" />

<input type="hidden" value="position" name="orderby"/>

<input type="hidden" value="desc" name="orderway"/>

<input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'htmlall':'UTF-8'}{/if}" />

</p>

</form>

</li>

{/if}

</ul>

</div>

<div class="sf-right"> </div>

 

<!--/ Menu -->

{/if}

 

save and reload your page.

 

You may need to (TEMPORARILY!!): - turn OFF your cache and- 'Template cache' set to "Recompile templates if the files have been updated"in Advanced Parameters->Performance

 

to see the changes. (Don't forget to turn cache back ON afterwards!)

 

 

My 2 cents,

pascal

[vekia]

thanks Pascal, may i know what kind of plugin (it is possible?) you use to debug css styles in IE ?

[PascalVG]

Hi Vekia,

No actually another post that you answered gave me this knowledge (you answered a question and showed the use of before and after :-)

I then read that IE6/7 didn't know these...

 

No IE debugger (not even IE at hand I have a mac ;-) )

pascal

 

[Crystal Wizard]

I have tested in IE 8 and 9, and have this display problem in both.

[Crystal Wizard]

UPDATE: I have now tested in IE 10 (Windows 8) and it works fine. Still displaying wrong in IE 8 and 9.

[Crystal Wizard]

Sorry to necro this thread. I've had a lot on, but now its time to get this working.

 

I am still having the top bar display wrong in IE (8 and 9).

As shown in the first post, the menu is displaying behind my Logo, rather than across the page.

 

Also, in Chrome and Google it has gone back to the original Black rather than Purple. I think this was when PrestaShop got upgraded.

Where is the code to alter this?

[PascalVG]

For the menu color:

 

http://www.thecrystalwizard.co.uk/shop/modules/blocktopmenu/css/superfish-modified.css (line 70):

 

.sf-menu {

float: left;

margin-bottom: 1em;

background-color: #9966CC;    <- change to this

}

 

 

Same file, line 87:

 

.sf-menu li li {

background: #9966CC;

}

.sf-menu li li li {

background: #9966CC;

}

 

 

Same file, Line 93:

.sf-menu a:focus, .sf-menu a:hover,.sf-menu a:active {

background: #9966CC;

}

 

Unfortunately no IE available to test... Anyone?

 

pascal

[Crystal Wizard]

Thanks. 

have made those changes, all worked as expected

 

Still have problem with menu displaying badly in IE.

Edited November 24, 2013 by Crystal Wizard (see edit history)

[PascalVG]

Looks like you forgot one:

 

Same file, line 90:

.sf-menu li li li {

background: #9966CC;

}

[PascalVG]

Maybe change the background of the selected menu item as well. It's now still grey:

 

Same file: Line 97:

.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {

background: #8550C0;   <-change to this

outline: 0;

}

pascal

[Crystal Wizard]

Thanks. That does look better.

 

Still don't know why IE is messing up the top-bar.

[vekia]

it's because IE8 is outdated browser.

http://stackoverflow.com/questions/2450614/why-is-ie8-rendering-superfish-menu-wrong

[Crystal Wizard]

The same behaviour is happening in IE9.

 

I have looked at the solutions in the link you provided, but they don't seem to do anything.
(I'm not sure if I'm doing the ul width right ...)

 

Is there a way I can get this menu displaying correctly in IE8/9?