[Pro] HTML5 Validation Error?

I’m getting a validation error on one of my websites.

The scrolling attribute on the iframe element is obsolete. Use CSS instead.

I’m assuming it has something to do with the Facebook elements at the top left of the page. The offending code is below. Is there anyway I can fix this without resorting to CSS?

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Frivercitybuilders&amp;send=false&amp;layout=button_count&amp;width=150&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe>

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

IF you are pasting this code in, then try replacing the scrolling=no part with just the word seamless (replace the entire name/value pair with just that one word). That means the same thing in an HTML5 page.

Walter

On Oct 1, 2013, at 6:38 PM, RavenManiac wrote:

I’m getting a validation error on one of my websites.

The scrolling attribute on the iframe element is obsolete. Use CSS instead.

I’m assuming it has something to do with the Facebook elements at the top left of the page. The offending code is below. Is there anyway I can fix this without resorting to CSS?

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Frivercitybuilders&amp;send=false&amp;layout=button_count&amp;width=150&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe>

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That doesn’t seem to be working. I must have the syntax wrong somewhere. Would you mind pasting a copy of what the code should look like?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No, I just looked it up and it’s not supported anywhere except Safari on iOS. Probably when the Mavericks Safari meets the world, we can use it there as well. So belt-and-suspenders time:

http://scripty.walterdavisstudio.com/iframe.html

This is how you use the attribute, and The CSS in the head of the page is how you fake it until the browser support materializes.

Walter

On Oct 1, 2013, at 10:09 PM, RavenManiac wrote:

That doesn’t seem to be working. I must have the syntax wrong somewhere. Would you mind pasting a copy of what the code should look like?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, I finally got it to work. Apparently the W3C Validator doesn’t like the word “seamless” because, according to it, seamless has not been fully adopted by many of the browsers.

This is what worked:

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Frivercitybuilders&amp;send=false&amp;layout=button_count&amp;width=150&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" style="border:none; overflow:hidden; width:150px; height:21px;"></iframe>

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That’s a much simpler implementation, but this is what I’m getting:

Validation Output: 2 Errors

 Line 116, Column 365: The frameborder attribute on the iframe element is obsolete. Use CSS instead.
…amp;height=21" frameborder="0" width="150" height="21" seamless></iframe></div>
✉
 Line 116, Column 365: The seamless attribute on the iframe element is not supported by browsers yet. It would probably be better to wait for implementations.
…amp;height=21" frameborder="0" width="150" height="21" seamless></iframe></div>

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, then remove frameborder=0 and add border:none to the iframe style declaration.

Walter

On Oct 1, 2013, at 10:53 PM, RavenManiac wrote:

That’s a much simpler implementation, but this is what I’m getting:

Validation Output: 2 Errors

Line 116, Column 365: The frameborder attribute on the iframe element is obsolete. Use CSS instead.
…amp;height=21" frameborder="0" width="150" height="21" seamless></iframe></div>
✉
Line 116, Column 365: The seamless attribute on the iframe element is not supported by browsers yet. It would probably be better to wait for implementations.
…amp;height=21" frameborder="0" width="150" height="21" seamless></iframe></div>

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Nope, that didn’t work either.

Line 117, Column 357: Attribute border:none is not serializable as XML 1.0.
…on=like&amp;height=21" border:none width=150 height=21 seamless></iframe></div>
✉
 Line 117, Column 357: Attribute border:none not allowed on element iframe at this point.
…on=like&amp;height=21" border:none width=150 height=21 seamless></iframe></div>

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I tried it again without the border attribute and it does validate using seamless, but it’s not recommended. Perhaps I’ll just wait until the current crop of browsers begin to support the seamless attribute.

Just out of curiosity, is there anyway to add some css to the div that contains the social media iframe code? There’s more on this styling technique here:

And here’s the site again: http://gorcb.com
The div is entitled “social-wrapper”


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You have to make that part of the style tag:

<iframe style="border:none; overflow:hidden" ...><.iframe>

It’s not a normal attribute of the iframe tag itself.

Walter

On Oct 2, 2013, at 2:17 PM, RavenManiac wrote:

Nope, that didn’t work either.

Line 117, Column 357: Attribute border:none is not serializable as XML 1.0.
…on=like&amp;height=21" border:none width=150 height=21 seamless></iframe></div>
✉
Line 117, Column 357: Attribute border:none not allowed on element iframe at this point.
…on=like&amp;height=21" border:none width=150 height=21 seamless></iframe></div>

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you create a style named* #social-wrapper iframe and then add all of the attributes we have been bandying about here to it, that will access the iframe without you having to touch it directly. This is another example of a descendant selector.

Walter

*In Freeway’s Edit Style dialog, you would put this exact selector (minus the back-ticks, if you’re looking at this in Mail) in the Tag field, and then tab into the Name field, delete what’s there, and tab out. This will give you the precise selector you want, and allow you to use this style without actually applying it to anything.

On Oct 2, 2013, at 2:27 PM, RavenManiac wrote:

I tried it again without the border attribute and it does validate using seamless, but it’s not recommended. Perhaps I’ll just wait until the current crop of browsers begin to support the seamless attribute.

Just out of curiosity, is there anyway to add some css to the div that contains the social media iframe code? There’s more on this styling technique here:
http://stackoverflow.com/questions/4804604/html5-iframe-seamless-attribute

And here’s the site again: http://gorcb.com
The div is entitled “social-wrapper”


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Awesome. I’ll give it a shot.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options