Friday, March 13, 2009

Background color or image problem of an iFrame in IE

Few days ago I have faced background image problem for iFrame in IE and search in web for the solution but i did not get any help. Then I have tried to solve it and finally I have solved this by using following two attributes background: transparent; and background-color: transparent;
Below is the source HTML of main page from where iFrame has been included which is used frame.html:

<html>
<head> 
<title>iFrame</title> 
<style type="text/css"> 
.iframe { 
 background: transparent; 
 background-image: url('sample.jpg'); 
} 
</style> 
</head> 
<body> 
<iframe src="frame.html" height="100%" width="100%" allowtransparency="true" class="iframe"></iframe> 
</body> 
</html> 

Below is the source code of frame.html:
<html>
<head> 
<title></title> 
</head> 
<body style="background-color: transparent;"> 
<table> 
<tr> 
 <td height="200" width="300" valign="middle" align="center"> 
  Sample Text Sample Text Sample Text Sample Text Sample Text 
  Sample Text Sample Text Sample Text Sample Text Sample Text 
  Sample Text Sample Text Sample Text Sample Text Sample Text 
  Sample Text Sample Text Sample Text Sample Text Sample Text 
  Sample Text Sample Text Sample Text Sample Text Sample Text 
 </td> 
</tr> 
</table> 
</body> 
</html> 
Though I have solved the background problem in IE by above code but i am suggesting to use color in place of image for following two reasons:
  • It may create problem to load bulky file by Ajax request.
  • Sometimes it may flicker white color before loading file.