Cross browser HTML5 iFrame

Question

Right now I have an iFrame object with the seamless attribute which looks perfect,

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.google.com%2F&amp;amp;layout=standard&amp;amp;show_faces=false&amp;amp;width=400&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;height=35" seamless></iframe>

with a couple css attributes

iframe {
  overflow: hidden !important;
  border: none !important;
  width: 400px;
  height: 35px;
  background-color: #cce0da;
  text-align: right;
  padding-left: 20px;
}

Then for Internet Explorer I have some fallback attributes applied with some jQuery

$(function() {
  $('iframe', '.ie')
    .attr('allowTransparency', 'true')
    .attr('frameBorder', '0')
    .attr('scrolling', 'no');
});

What I end up with is a transparent iFrame in IE with an unnecessary border.

Maybe there is a problem with my code? Maybe my DOM manipulation of the frameBorder attribute doesn't render after document.ready?

Answer 1

Try adding a "frameborder" attribute directly in the markup...

<iframe frameborder="0"