Magento CSS Merge breaks layout in IE browsers

Question

I am developing a magento website, and it is using CSS merge option. currently in IE the CSS not rendering properly. When I remove some part of CSS file its working. Some times it works when I remove 50 line from top. Some times it works when I remove 100 lines from bottom. So it's nothing related to the CSS I wrote. Merged file contains about 6000 lines and having 380 KB file size.

can anybody help me on this ?

Thanks

hi, i have the same problem. With which ie version do you have the problem? — LucScu, May 09 '14 at 10:09
Please refer this http://stackoverflow.com/questions/9906794/internet-explorers-css-rules-limits — Nguyen Viet Tung, Sep 05 '14 at 18:17

score 0 · Answer 1 · answered Jul 12 '12 at 10:08

0

I added media="null" attribute to in the node in layout.xml for the file having huge size. So it will be merged as another file along with media="all" and media="print".

This is worked for me.

answered Jul 12 '12 at 10:08

subi

89
7

NOT WORK! if you use media="null" page not load css – LucScu May 09 '14 at 12:52

score 0 · Answer 2 · answered Nov 26 '14 at 12:46

It seems like Internet Explorer's 8 and 9 4095 selectors limit.

In my case I've had a list of about 7 style-sheets that were added in page.xml(so site-wide). Total selector count in these files was 4463 so above the limit.

I've used:

@import 'some-style-sheet.css' all;

for 3 top style sheets, to import them into the 4th one, then commented out these 3 in page.xml.

That helped as the total number of selectors in the merged file was reduced.

Magento CSS Merge breaks layout in IE browsers

2 Answers2