3

I'm adding functionality to an existing web page of a system. I'd prefer to change as little outside the realm of the change I'm making.

The trouble is that everything works across browsers until viewed in IE8. There the page views with some weird display issues that are on part of the page unrelated to what I changed.

Using the IE Developer tool, I was able to see that it's not finding the style features of a CSS file that the source for the page shows should be getting loaded.

I don't know much about the IE8 Developer tool, but when I look under the CSS tab I get a list of CSS files. I don't see the CSS file in question listed, so it looks like it didn't load for some reason.

I've added two new CSS files with what I've done, so maybe I've pushed it past the limit.

So, this sounds like the problem IE (although IE9 works) has that there is supposed to be a limit to 31 CSS files possibly being able to load: Internet Explorer's CSS rules limits

But in that list, I can count way more than 31 CSS files. It looks like there is more like 60 of them. But some files are being loaded via @import and others without, so maybe that explains why there are more.

How can I be sure this is the the problem? I don't see any errors in the IE8 Developer console. I ran CSS Lint on the file that isn't loading -- which isn't mine. There were some warnings, but it didn't appear serious.

From what I've read it sounds like there is no good solution to this. Is that correct?

Community
  • 1
  • 1
George Hernando
  • 2,550
  • 7
  • 41
  • 61
  • Can you add yours to the top of the stack? – Scott Simpson Apr 11 '13 at 00:01
  • My CSS file is in fact loading. I seem to have bumped out one of the existing CSS files used on the page -- and without it there, I'm seeing page rendering issues. – George Hernando Apr 11 '13 at 01:04
  • 1
    It seems like this site is a mess ... so how about adding your CSS as an embedded style sheet? I am assuming there is some sort of template system, so you could just add it once to the header section. Also, if you happen to be in PHP you could use something like this: https://github.com/filamentgroup/quickconcat – Scott Simpson Apr 11 '13 at 11:33
  • Can you add a conditional comment to the HTML? – mgrahamjo Apr 15 '13 at 23:43
  • 2
    "more like 60 of them" = you can't fix this project. ;) – DA. Apr 24 '13 at 15:15
  • 1
    Yes IE8 has a limit on the number of CSS files, and yes you can get around it by using @import, but seriously... 60 CSS files? Really? That's going to give you performance problems in *any* browser simply from the number of http requests being made. There's absolutely no way that's justifiable in a well written site. Some CMS systems (eg Drupal) will do this if you've got a lot of modules (ie one or more CSS per module; it adds up), but most of these platforms (the good ones at least) have a built-in minifying option, so your answer could be simply to switch that option on in your admin panel. – Spudley Apr 24 '13 at 15:45

1 Answers1

2

I know that the goal is to change a little as possible, however, you will reap great benifits if you were to either manually combine at least some of the css into a single file our use something like Minify (http://code.google.com/p/minify/) in the backend code that will do its best to agregate not only css but javascript files as well.

In the name of change only what is necessary, you could always just open up one of the other css files and paste your css into one of them at the end of the file. This is sloppy, but if the problem really is from a maximum number of css files in IE, then that would certainly solve the issue.

Reid Johnson
  • 1,394
  • 14
  • 20