IE 7 or 8 Won’t Load My CSS Files

CSS files not working in Internet Exploder Explorer 7 or 8?

Did you know there is a limit on the number of CSS files Internet Explorer will load? After 31 css files Internet Explorer will just ignore additional css links.

Workaround for Development Servers

You can get around this limit by using the CSS @import statement. The way you have to do it is arrange your css files into groups of 31 or less. So you could have 50 css fils if you did something like…

1
2
3
4
<link rel="stylesheet" type="text/css"
              href="/css/group1.css" />
<link rel="stylesheet" type="text/css"
              href="/css/group2.css" />

Then inside of each of those files you would have 25 import statements…

/css/group1.css

1
2
3
4
@import url(/css/mycss01.css);
@import url(/css/mycss02.css);
...
@import url(/css/mycss25.css);

/css/group2.css

1
2
3
4
@import url(/css/mycss26.css);
@import url(/css/mycss27.css);
...
@import url(/css/mycss50.css);

Why you shouldn’t try to work around the limit

For managing CSS in a big project with lots of reusable components the above solution is perfect in development. But in production you are adding an enormous amount of overhead for your server and your users. The next step should be to create a script that combines your css files and optimizes them for production. That way you can use the individual files in development and track them in source control, but you run your optimization script each time you release which can give you a much faster loading site.

Category(s): Browser Compatibility
Tags: , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

 

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam protection by WP Captcha-Free