Compatibility Prestashop with Internet Explorer

A few customers have reported a strange problem. They uploaded their created theme ZIP's into their eshops and...
...it worked!
Well - except for IE7, IE8 and IE9. What kind of problem was this?

It's quite simple. Internet Explorer up to version 9 supports only 32 CSS files. That's true - check out this serious discussion. That seems as quite a big number, but not for Prestashop. The problem is that every frontend module has its own CSS file and if you have installed a lot of plugins you could come across a situation where you didn't  see the colors/layout you have set in the Maker.

Reason of the problems?

The reason is simple. Colors are defined in a custom.css which is loaded as the last CSS document. If the browser has already loaded 32 CSS files, this one would be ignored like it never existed.

Our solution for Internet explorer

Today we upgraded the Maker and this problem is solved by merging small CSS files into global.css. That means small (and always needed) CSS files like:
blockcart.css
blockcms.css
blockcontact.css and many others

Changes in Header.tpl to be IE friendly

This is how we edited header.tpl to remove 15 CSS files and their content has been copied into globals.css. The best part is - we did not change any core function.

{if isset($css_files)}
{assign var=forcount value=1}
{foreach from=$css_files key=css_uri item=media name=css}
{assign var=cssfile value=$css_uri|substr:-30}
{assign var=cssfile2 value=$css_uri|substr:-20}
{if $cssfile != 'actinfos/blockcontactinfos.css' and
$cssfile != '/modules/blockcms/blockcms.css' and
$cssfile != '/blockcontact/blockcontact.css' and
$cssfile != 'facturer/blockmanufacturer.css' and
$cssfile != 'countfooter/blockmyaccount.css' and
$cssfile != 'es/blocksocial/blocksocial.css' and
$cssfile != '/homefeatured/homefeatured.css' and
$cssfile != 'les/blockreinsurance/style.css' and
$cssfile != 'es/blocksearch/blocksearch.css' and
$cssfile != 'lockuserinfo/blockuserinfo.css' and
$cssfile != 'odules/blockcart/blockcart.css' and
$cssfile != 'tlinks/blockpermanentlinks.css' and
$cssfile2 != 'css/product_list.css' and
$cssfile != 'mplete/jquery.autocomplete.css' and
$cssfile != 'odules/blocktags/blocktags.css'
}
{assign var=forcount value=$forcount+1}

{/if}
{/foreach}
{/if}


Andrej Staš

Andrej is a Prestashop enthusiast. He started by developing his own themes and then formed the idea of creating Theme Maker. He enjoys finding ways to make his life simpler, and that is the philosophy he incorporates into all his projects. Andrej is also interested in WordPress, Amazon FBA, drop shipping, studying languages, and reading books.

3 Comments

joshua miles · 1 decade ago

nice andrej i was one of those who brought that to your attention, do i have to rebuild the templet and reload it in to prestashop for the website that don’t have their templets showing in internet explorer

    Andrej · 1 decade ago

    Hi Joshua,

    just re-download your theme (from the “Account” page), install it again and that’s all :)

Daniel Gras · 1 decade ago

I have the same problem now, in firefox and chrome prestashop theme works very good, internet explorer have some problems and dont work, the theme i actually generate and download…. how can I solve?

You must be logged in to post a comment.