IFRAME Transparency in IE and other browsers

Microsoft Internet Explorer is introduced the IFRAME.  IFRAME is used to fetch the source from different areas. Basic syntax of the IFRAME: < iframe src="myframe.php" >< /iframe > IFRAME transparency: < iframe src="myframe.php" allowtransparency="true" >< /iframe > Browsers default adds a background color to , mostly it is white. To add a transparency to <iframe> we need to use additional properties to <iframe> and <body> within that iframe. Add following line in myframe.php: <body style="background: transparent"> Please note that if there is any background image in iframe then ‘background: transparent’ will remove the background image, background color and will make the iframe fully transparent. If you want to keep the background image but want to have transparency to iframe use following line: <body style="background-color: transparent"> Above line will remove the background color of the iframe that was added by browser by default. Above code will works only, when we used below mentiond Document Types. Each page should start with declaring the DOCTYPE and html at the top of the page. <!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"> Even though the DOCTYPE and html is declared at the top of the page some times iframe doesn’t get the transparency. Then you need to check the ‘lang’ attribute that is used in <html> tag. <!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" <?php language_attributes(); ?>>; Most of the CMS based websites which uses multilingual behavior, adds language related function in <html> tag, which prevents the transparency of the iframe. To overcome this define your preferred language for the page: <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">; By doing this your iframe will have transparency works in all modern browsers including...

Read More