Facebook Likebox "allowTransparency" gives invalid XHTML in W3C validator

Question

What I did: I embedded Facebook Like Box on my otherwise "XHTML 1.0 Transitional" webpage. The source code of Facebook Like Box is as given by Facebook:

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=true&amp;height=62"
  scrolling="no"
  frameborder="0"
  style="border:none; overflow:hidden; width:292px; height:62px;"
  allowTransparency="true">
</iframe>

What W3C validator says: When I check the webpage in W3C validator, it gives following error:

Line 600, Column 421: there is no attribute "allowTransparency"

But, IE needs allowTransparency="true"> to work.

Expected Solution: What should I do to make it validate as XHTML 1.0 Transitional while keeping Facebook like box on my webpage.

Answer 1

You can write two codes for it. One with allowTransparency with if statement for IE and another without it. This way, it can be done. So, use this embed code with conditional HTML comments:

<!--[if IE]>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=true&amp;height=62"
  scrolling="no"
  frameborder="0"
  style="border:none; overflow:hidden; width:292px; height:62px;"
  allowTransparency="true">
</iframe>

<![endif]-->
<!--[if !IE]>-->
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=true&amp;height=62"
  scrolling="no"
  frameborder="0"
  style="border:none; overflow:hidden; width:292px; height:62px;">
</iframe>

<!--<![endif]-->

This will validate the XHTML since the iframe code is commented out and you can use allowTransparency too.

EDIT: Closed the iframe as pointed out by staticbeast in a comment.

Answer 2

If IE truly needs allowTransparency="true" to work, then you're not going to be able to create 100% valid XHTML 1.0 Transitional markup.

...but why does IE need that attribute? What happens when it's omitted?

---

If you're really that concerned about W3C validation (I don't think it's worth it, but that's just me), then you could apply the same iframe attribute using JavaScript. I'm not recommending this,* but you could do it:

document.getElementById('theIFrameID').allowTransparency = true;

---

*because I don't think that the goal of creating 100% validated markup justifies using JavaScript to accomplish something that's otherwise-identical to the static markup.