I ran into a weird bug recently that I hope no one else ever experiences.  I use Telerik’s Rad Controls for ASP.NET AJAX because they’re powerful, pretty and developer friendly.  I recommend them to ALL .NET developers.  I had just put together a server control that used several of Telerik’s controls and my own Rounded DIV Container control as well.  It looked great in all browsers.  I was happy.   I added another Rounded DIV to the page.  When I refreshed the page, all of my styles were gone.  I know the CSS is good, because I was using the control elsewhere.  Was it possible I had an unclosed tag somewhere?  I tried the page in Firefox…perfect, then Safari…perfect, then Google Chrome…perfect.

Scratching head…

At this point, I know it’s a browser issue, but I’m still not sure what’s causing it.  After digging around and playing with the Internet Explorer Developer Toolbar, I noticed that the page seemed to lose it’s style whenever there were more than 30 registers resources on a page (i.e. CSS & JavaScript file references).  I probably had too many CSS files as it was.  On top of that, I was dynamically referencing js files.  Telerik also register javascript and css files via the WebResource.axd (embedded .NET resources).

Here’s how you can check how many resources are registered for a given page:

1. Check your markup
   1. Look for all instances of registered resources (CSS, JS, etc)
      <link id=”cssStyleSheet” rel=”stylesheet” type=”text/css” runat=”server” /> — each one of these counts as 1
   2. If you’ve got a lot of these, consider consolidating into fewer resources
2. Use the IE Developer Toolbar, ChromeBug (Google Chrome) or FireBug (the best) to check for registered resources in WebResource.axd
   1. Firebug (ChromeBug is similar)
      1. Once the page is loaded, highlight the CSS tab and click the resource drop down list just below it
         
      2. Do the same thing on the “Script” tab (ASP.NET is close to 30! Watch out! )
         
   2. IE Developer Toolbar
      1. In IE, press F12 to bring up the Developer Tools
      2. Click on CSS and count the items in the drop down list
      3. Do the same for Script
         

I hope you don’t have this many registered resources.   But if you do, and things look weird in IE 7 and IE 8, now you know why.  Time to consolidate!