Facebook Likebox "allowTransparency" gives invalid XHTML in W3C validator

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 W3开发者_开发技巧C 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.

---

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.

---

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.

---

<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_es=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>

I don't know why they used styles to do everything except allow transparency.So just throw it in with the rest of the styles and it should validate.

---

I've not tested it recently, but I think you're allowed to have comments within HTML tags, so just wrap the allowTransparency in an IE conditional comment:

<!--[if ie]> allowTransparency="true" <![end if]-->

To have IE see it, and everything else ignore it. This should also be valid XHTML, since comments are ignored by browsers, and conditional comments parses only by IE.

---

For me is the best way use a jQuery like this:

For facebook like button. I set class="likebtn" and then in .js file:

$(document).ready(function () {
  $(".likebtn").attr('allowTransparency', 'true');
});

Thats all ;-)

---

Leave it as is. "allowTransparency" only means something to IE, and it will be ignored otherwise. Validation is a tool for checking your document against the standard, not an end in itself. You are knowingly writing something outside of the HTML standard for a particular case; acknowledge that rather than trying to hide it.