With Internet Explorer 7 approaching release and all the web development that goes on these days, I would have thought that every CSS IE bug would have been documented by now. Yet I seem to have discovered a new one, although with my eccentric file organizing techniques I can see why nobody else had run across it yet.
The Bug
The short of it: If you are in the habit of “inheriting” your stylesheets, ie using
@import url("filename here");
IE will not import any more than 3-levels of stylesheets. At first I thought this was some undocumented attribute of the @import rules, but Firefox will do it just fine and only IE6 seems to be having issues with it.
Example
Here is an example page to show the problem. The text on the sample page should be blue, however if you follow the link in IE it will display in black. The sample page is linking to the stylesheet with:
<link rel="stylesheet" href="level_5.css" type="text/css" media="screen" />
level_5.css contains only this rule:
@import url("level_4.css");
And then level_4.css is importing level_3.css, level_3.css imports level_2.css, etc.
level_1.css is the stylesheet with the rule that changes the font color to blue:
p { color: blue; }
Why Me?
As I said at the beginning of this post, I couldn’t believe nobody else had run into this bug before. And then I realized it’s probably cause no other idiot has tried using the import feature of stylesheets as a method of inheritance, or at least never gone more than three-levels deep.
The reason why I ran into this problem is because I tend to set a master stylesheet for the site that contains the fonts, the basic layout, and any other styles that need to be set. Then all other pages are subsets that inherit the master sheet, and if further variation is needed I just continue inheriting.
As an example:
-
Master
-
Interior
-
Category
- Sports
-
Category
-
Interior
I know that the popular remedy for this is setting:
<body class="interior">
But for development environment reasons and my dislike of class-itis, I prefer to go the multiple stylesheet route.
You’re Gonna Love This
And thus ends the horrible documentation of this bug, which I hereby dub the LImport bug, or “Limited Import”. Ignore the fact that my last name is part of the name of the bug. That’s entirely coincidence =)
Syndicate this site
comments
dont worry, ive begun submission of a wikipedia page on this