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!

In their own words, Cooliris “…transforms your browser into a lightning fast cinematic way to enjoy photos and videos from the web or your desktop.” I’ve been using it as a Firefox plug-in for about a year; though it is available for Internet Explorer and Safari as well. Whether searching for new desktop wallpaper or stock images for a website, I would use Cooliris to quickly browse thousands of photos with an Apple “CoverFlow” feel.

Recent Cooliris updates make for a GREAT way to search Craigslist. Previous versions of Cooliris appeared to open as a full screen, modal pop-up which you could “escape” out of. Their latest version actually opens a new browser tab; allowing you to bookmark your favorite image searches. Combine this with Craigslist, and you’ve got a very efficient way to peruse the world’s largest yard-sale!

I’m a musician. So, naturally, I browse Craigslist.com looking for instruments and miscellaneous recording gear at bargain basement prices. I don’t waste time looking at ads that don’t have pictures. This morning, I decided to search for musical instruments for sale in my area and noticed the Cooliris icon was illuminated. One click took me to a magical, Craigslist wonderland! And better yet, when I clicked on the images to get a closer view, the item description was listed along with all other item photos. Here’s how:

1. Download and install Cooliris
2. Browse to your local flavor or Craigslist.com
3. Drill-down to your category of choice
4. Search for listings that have images by checking the “has image’ check box (leave the search text box empty)
5. Click search and then click the illuminated Cooliris icon
6. Bookmark the Cooliris page that opens, rinse and repeat

Here are a couple screenshots I took: