0

I've got an issue with our website not appearing correctly on IE9. Basically, it looks as though some of the CSS styling isn't getting included. I've bought a third-party theme. The theme demo works fine in IE9 it appears, but on my site it doesn't.

Our site has quite a few third party extensions and includes more CSS files than I can shake a stick at. I was thinking that perhaps I could just experiment on removing certain css files to see if it makes a difference incase one of them is breaking in IE9 and causing the rest of the CSS not to load. However, the CSS files come from many different extensions so I don't know where to start!

I was just thinking, can anybody recommend an approach to finding out what the issue is? I tried debugging in IE9 and it appears there are no errors.

Many thanks,

Manoj

  • If you can provide a link to the demo, a link to your site, and an item that is displaying incorrectly that will help. If you want to look yourself you can go to the demo and to your site and click Control + U to see the generated View Source. Then you can compare which CSS files are or are not being loaded. – Jason Tipton Nov 17 '14 at 19:07
  • @JasonTipton you can add the second part of your comment as an answer. It's actually quite valuable information – Sander Mangel Nov 17 '14 at 20:18
  • Good call @SanderMangel will do =) – Jason Tipton Nov 18 '14 at 2:12
1

To view the different CSS files that are being loaded you can go to the demo page and to your site. On each page, click Control + U to see the generated View Source. Then you can compare which CSS files are or are not being loaded.

  • Thanks for the advice Jason. I've looked side by side and I can see certain CSS files aren't included. Something is breaking it, but I don't know what yet! Also, the Favicon doesn't load in it either! Link to the site in question: best4ecigs.uk. If you view this in Internet Explorer 9 and then view it in practically any other browser/version, you'll see that styling is missing in IE9. – Manoj Solanki Nov 18 '14 at 11:12
  • Some further information. I disabled one or two extensions by moving the xml configs for them from /app/etc/modules/*.xml to another directory. After clearing Magento cache, I found that the page looked better, ie. it loaded more of the required stylesheets. It doesn't appear to be associated with a particular extension as I replicated the issue with removing different extensions. It looks like I've hit the limits of IE9 with regards to how many stylesheets it can import, which is well documented. E.g. stackoverflow.com/questions/11080560/… – Manoj Solanki Nov 18 '14 at 12:22
  • For the favicon it may be falling back to Magento's default favicon.ico (best4ecigs.uk/favicon.ico). IE9 typically doesn't work well with any other formats on favicons (like favicon.png). You can use an online converter (such as favicon-generator.org) to make your file format .ico or you can open the image in Microsoft Windows Paint and choose Save As. The .ico format won't show up in the format drop down but if you manually type the name as favicon.ico and click Save it will work correctly. – Jason Tipton Nov 18 '14 at 15:14
0

I found a possible answer for you in the blog of a man named John Albin, http://john.albin.net/css/ie-stylesheets-not-loading

Microsoft has a Knowledge Base article that says “All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer.” Not only is this KB article wrong (it’s 31, not 30), the full picture is more subtle.

https://support.microsoft.com/en-us/kb/262161

This problem occurs because the following conditions are true in Internet Explorer:

All style tags after the first 31 style tags are not applied.
All style rules after the first 4,095 rules are not applied.
On pages that uses the @import rule to continously import external style sheets that import other style sheets, style sheets that are more than three levels deep are ignored.

Hope this helps.

Cheers,

-1

In order to solve the IE9 issue, I basically switched on merging of CSS files in Magento config (under developer options). It seems fine now on IE 9 and on various other browsers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.