Telerik blogs

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

by Vladimir Enchev
May 30, 2007 Web 0 Comments


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 :-)
About the Author

Vladimir Enchev

is Director of Engineering, Native Mobile UI & Frameworks

Comments

Comments are disabled in preview mode.