title: Dynamics CRM 2011 web resource not showing in Chrome?
body: <p>I have implemented this Solution:
  <a href="http://crm2011lookuppreview.codeplex.com/" rel="nofollow">http://crm2011lookuppreview.codeplex.com/</a></p>
  
  <p>It works great in Outlook and on IE, but the previews don't show at all on Chrome. I tried changing the jQuery .show() commands to a .style.display = "block" but nothing. Below is the JavaScript included in the solution that is responsible for building the HTML and displaying it. It seems that Chrome doesn't load the web resource at all because on IE at least, the outline of the resource is visible and then the data comes and fills in that outline. In Chrome, there's just blank space. But it could be how Chrome renders, I dunno...</p>
  
  <pre><code>//LookupPreviewScript.js
  ﻿///&lt;reference path="XrmPage-vsdoc.js"/&gt;
  var XrmPage;
  var popWindow;
  var _VerticalLayout = "V";
  var _HorizontalLayout = "H";
  var _ZLayout = "Z";
  var _NLayout = "N";
  
  function LoadLookPreviewDelayed(webResourceId, lookupAttributeId, columnList, layout)
  {
      myFn = function(){LoadLookPreview(webResourceId, lookupAttributeId, columnList, layout);}
      setTimeout(myFn, 2000);
      Xrm.Page.getAttribute(lookupAttributeId.toLowerCase()).addOnChange(myFn);
  }
  
  function FormHTMLTable(divTag, controlSet, layout)
  {
      var str = "";
      if(layout == _VerticalLayout)
      {
          str = "&lt;table&gt;&lt;tbody&gt;";
          for(var k=0; k &lt; controlSet.length; k++){
          str += "&lt;tr&gt;";
          str += "&lt;td class='headerCss'&gt;" + controlSet[k].attributeDisplayName + "&lt;/td&gt;";
          str += "&lt;td&gt;" + controlSet[k].attributeValue + "&lt;/td&gt;";
          str += "&lt;/tr&gt;";
          }
          str += "&lt;/tbody&gt;&lt;/table&gt;";                              
      }
      else if(layout == _ZLayout)
      {
          str = '&lt;table&gt;';
          str += '&lt;tbody&gt;';
          for (var j = 0; j &lt; controlSet.length; j++) {
              var index = j + 1;
              str += "&lt;tr&gt;"
              str += "&lt;td class='headerCss'&gt;" + controlSet[j].attributeDisplayName + "&lt;/td&gt;";
              str += "&lt;td&gt;" + controlSet[j].attributeValue + "&lt;/td&gt;";
              str += "&lt;td class='seperator'&gt;&lt;/td&gt;";
              if(index &lt; controlSet.length)
              {
                  str += "&lt;td class='headerCss'&gt;" + controlSet[index].attributeDisplayName + "&lt;/td&gt;";
                  str += "&lt;td&gt;" + controlSet[index].attributeValue + "&lt;/td&gt;";
              }
              str += "&lt;/tr&gt;"
              j++;
          }
          str += '&lt;/tbody&gt;'
          str += '&lt;/table&gt;';
      }
      else if(layout == _NLayout)
      {
          str = '&lt;table&gt;';
          str += '&lt;tbody&gt;';
          var half = Math.round(controlSet.length / 2)
          for (var j = 0; j &lt; controlSet.length; j++) {
              var index = j + half;
              if (j &lt; half) {
                  str += "&lt;tr&gt;"
                  str += "&lt;td class='headerCss'&gt;" + controlSet[j].attributeDisplayName + "&lt;/td&gt;";
                  str += "&lt;td&gt;" + controlSet[j].attributeValue + "&lt;/td&gt;";
                  str += "&lt;td class='seperator'&gt;&lt;/td&gt;";
                  if (index &lt; controlSet.length) {
                      str += "&lt;td class='headerCss'&gt;" + controlSet[index].attributeDisplayName + "&lt;/td&gt;";
                      str += "&lt;td&gt;" + controlSet[index].attributeValue + "&lt;/td&gt;";
                  }
                  str += "&lt;/tr&gt;"
              }
          }
          str += '&lt;/tbody&gt;'
          str += '&lt;/table&gt;';
      }
      else 
      {
          str = "&lt;table&gt;&lt;thead&gt;&lt;tr&gt;";
          for(var k=0; k &lt; controlSet.length; k++){
          str += "&lt;th&gt;" + controlSet[k].attributeDisplayName + "&lt;/th&gt;";
          }
          str += "&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;";
          for (var i = 0; i &lt; controlSet.length; i++){
          str += "&lt;td&gt;" + controlSet[i].attributeValue + "&lt;/td&gt;";
          }
          str += "&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;";
       }
       divTag.innerHTML = str;
       $(divTag).slideDown(1000);
  }
  
  function LoadLookPreview(webResourceId, lookupAttributeId, columnList, layout)
  {
     var divTag;
     var webResource = Xrm.Page.getControl(webResourceId);
     var columnSet = new Array();
     var columnHeaders = new Array();
     var controlSet = new Array();
  
     successCallBack =  function (attributeCollection) {
                   for(var k=0; k &lt; controlSet.length; k++)
                   {
                      for (var i = 0; i &lt; attributeCollection.length; i++) 
                      {
                          if(attributeCollection[i].attributeName == controlSet[k].attributeLogicalName)
                          {
                               controlSet[k].attributeValue = attributeCollection[i].attributeValue;
                               break;
                          }
                      }
                   }
  
                   FormHTMLTable(divTag, controlSet, layout);
            };
  
          errorCallBack =  function (error) {
               divTag.innerHTML = "&lt;span class='error'&gt;" + error.message + "&lt;/span&gt;";
               $(divTag).slideDown(500);
           };
  
     if(webResource == null)
     {
         alert('No WebResource found with Id = ' + webResourceId);
     }
     else
     {
          divTag = document.getElementById(webResourceId).contentWindow.document.getElementById('lookupDIV');
          if(divTag != null)
          {
              divTag.display = "none";
              var columns = columnList.split('|');
              for(var i = 0 ; i &lt; columns.length; i++)
              {
                  var s = columns[i].split('#');
                  var _control = new Object();
                  _control.attributeDisplayName = s[0];
                  _control.attributeLogicalName = s[1].toLowerCase().replace(/^\s+|\s+$/g, '')
                  _control.attributeValue = '';
                  controlSet.push(_control);
  
                  columnSet.push(s[1].toLowerCase().replace(/^\s+|\s+$/g, ''));
              }
  
              if(Xrm.Page.getAttribute(lookupAttributeId.toLowerCase()) != null &amp;&amp; Xrm.Page.getAttribute(lookupAttributeId.toLowerCase()).getValue() != null)
              {
                  var id = Xrm.Page.getAttribute(lookupAttributeId).getValue()[0].id;
                  var entityName = Xrm.Page.getAttribute(lookupAttributeId).getValue()[0].entityType;
                  SDK.RetrieveData.RetrieveRequestAsync(entityName, id, columnSet, successCallBack, errorCallBack);
              }
              else
              {
                  FormHTMLTable(divTag, controlSet, layout);
              }
          }
          else
          {
              alert("Error in Loading Web Resource (DIV is NULL)")
          }
     }
  }
  </code></pre>
  
  <p>I'm guessing it's something simple with how or when the DIVs are rendered but I'm not well versed in cross-compatibility. </p>