All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer workaround

Wednesday, May 30, 2007 by Vladimir Enchev | Comments 5
?
Email to a friend
Did you know that all style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer?
Well this applies to IE7 and LINK elements too and if you have such page for example you are lost:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <link type="text/css" rel="stylesheet" href="StyleSheet.css" />
    <style type="text/css">
        body {background-color:blue;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
    </form>
</body>
</html>
Where the StyleSheet.css declaration is: body { background-color:red;}

And the workaround is: Use @import "StyleSheet.css" instead with a single style tag: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
       @import "StyleSheet.css";
    </style>
    <style type="text/css">
        body {background-color:blue;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
    </form>
</body>
</html>

Using this technique you can import styles as many as you want ... hopefully :-)
?
Email to a friend

5 Comments

  • ajaxus 31 May 2007
    I am curious how do you came into this situation at first?
  • Vladimir Enchev 31 May 2007
    Good question! There are various situations where styles/links are inserted dynamically. I have seen pages with more 100 custom controls + a stylesheet for every control instance.
  • ajaxus 31 May 2007
    I guessed it could be something like that. why do you insert all of them at once? isn't it huge amount of server requests(100 only for styles)? why you don't load them dynamicly?
  • Vladimir Enchev 31 May 2007
    Generally there are no differences between the static and dynamic styles creation (client-side or server-side) - this limitation is always present. Imagine that you have for example a grid component with more than 30 rows and you have a custom component in the first cell for every row and this component outputs a style or link element with predefined look. In this case the correct behavior should be to insert a single style element and using the @import to link the external css files for every different look.
  • ajaxus 31 May 2007
    Agree with you Vlad, thanks for comments.

    Cheers!

Add comment

  1. Formatting options
       
     
    		 
    		 
     
       
  3. (optional, emails won't be shown on public pages)
  4. (optional)
Read more articles by Vladimir Enchev - or - read latest articles in Developer Tools
RSS Feed
Bloggers Archive Tags