This little problem have hunted me for sometime now, I just never took the time to find a solution until now.

Let me sum up the problem.

When you deploy a silverlight application using the “ASP.NET 3.5” way by inserting a ScripManager and a SilverlightControl to embed your app, all seems to work great! The SL app runs in the browser with out the user having to do anything.

But what if you are going to deploy your app to a ASP.NET 1.1, ASP.NET 2.0, ASP, PHP, JSP or what ever site? If you need to do this, you can use the normal <object> tag to insert your application. (See the .html file generated in the Web Application Project when creating a Silverlight Application in Silverlight Beta 2). This also works great, but in IE I get an irritating “Click to activate and use this control” with an ungly border around my SL app.

What causes this, and how to we work around it?

Well, I found out that this is due to some “problem” in IE and it should be fixed in an update to IE from April 2008. See the post here.

I discovered that the virtual machine that I use to code in, where not updating automatically, which is why I see the problem.

We could all just lean back, and think “Ok, everybody updates, so there is no problem”. I think we are wrong here. I think “many” people for some reason don’t update their windows on a regular basis. The reasons for this could be many and is not a part of this post.

To have all my users have the best experience, I wanted to find a way where it worked no mather if you have an updated or an old version of IE. I googled it and found some samples, but non of them worked out of the box, and dome didn’t had a proper fall back handling.

Therefore I created my own. All you need for this is the HTML and the Silverlight.js file, which is located similar to this: C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Tools

 [code:html]

<!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>
<title></title>
<script src="Silverlight.js" type="text/javascript"></script>
</head>
<body>
<div id="SilverlightContent">
Silverlight not installed...please do so :)
</div>
<script language="javascript" type="text/javascript">
var parentElement = document.getElementById('SilverlightContent');
var altHTML = parentElement.innerHTML;
Silverlight.createObject(
"ClientBin/DeployTest.xap",         // Source property value.
parentElement,                      // DOM reference to hosting DIV tag.
"myPlugin",                         // Unique plug-in ID value.
{                                   // Plug-in properties.
width:'1024',                   // Width of rectangular region of plug-in in pixels.
height:'530',                   // Height of rectangular region of plug-in in pixels.
//background:'white',             // Background color of plug-in.
//isWindowless:'false',           // Determines whether to display plug-in in windowless mode.
//framerate:'24',                 // MaxFrameRate property value.
version:'2.0',                   // Silverlight version.
alt: altHTML                    // Alternate HTML to display if Silveright is not installed
},
{
onError:null,                   // OnError property value -- event-handler function name.
onLoad:null                     // OnLoad property value -- event-handler function name.
},
null,                               // initParams -- user-settable string for information passing.
null); 
</script>
</body>

/html>

 [/code]

Enjoy!