All posts

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

Wednesday, May 30, 2007

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 :-)
posted by: Vladimir Enchev

Facebook DZone It! Digg It! StumbleUpon Technorati Del.icio.us NewsVine Reddit Blinklist Furl it!

Comments  5

  • 31 May, 01:13 AM

    I am curious how do you came into this situation at first?

    comment by: ajaxus
  • 31 May, 01:54 AM

    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.

    comment by: Vladimir Enchev
  • 31 May, 02:15 AM

    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?

    comment by: ajaxus
  • 31 May, 02:29 AM

    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.

    comment by: Vladimir Enchev
  • 31 May, 02:42 AM

    Agree with you Vlad, thanks for comments.

    Cheers!

    comment by: ajaxus
Post a comment!

  5. Security image