Problem

Internet explorer 6, 7 and 8 has some weird behavior for iFrame rendering. They tend to not respecting border and background styles provided by CSS styles. So, you might find something odd looking in lower IE versions like this:

 

Solution:

To remove the white background add the following attribute to the iFrame declaration:
allowTransparency="true"

To remove the 3d border add the following attributes to the iFrame declaration:
frameBorder="0" border="0" style="border:0;"

Note: you can immediately see the change of background if applied in "developer tools" but the border change can only be seen if applied in actual code which will be rendered. Changing the attributes at "developer tools" will not take effect.

In addition, there is a Javascript solution to the border issue too. Add the following codes to your page:

// =========================================================================
// Remove borders on iFrames

if (window.document.getElementsByTagName("iframe"))
   {
      var iFrameElements = window.document.getElementsByTagName("iframe");
      for (var i = 0; i < iFrameElements.length; i++)
         {
            iFrameElements[i].frameBorder="0";   //  For other browsers.
            iFrameElements[i].setAttribute("frameBorder", "0");   //  For other browsers (just a backup for the above).
            iFrameElements[i].contentWindow.document.body.style.border="none";   //  For IE.
         }
   }

Add new comment