Topic-icon W3C validator fails + inline CSS load

Active Subscriptions:

None
12 years 2 months ago #42641 by webfoundryuk
I run W3C validator, it fails to validate code in login module generated after replacing {JFBCLogin} tag:

Errors found while checking this document as HTML5!

1. Element link is missing required attribute property.
…sets/jfbconnect.css" type="text/css" /><span class="sourcecoast"><div class="s…

2. Element div not allowed as child of element span in this context. (Suppressing further errors from this subtree.)
…t"><div class="social-login row-fluid"><div class="jfbcLogin pull-left"><a cla…

Can these errors be fixed? Block elements are not allowed inside inline elements for sure.

And can CSS file be included via native JDocumentHtml->addStylesheet() but not inside body?
<link rel="stylesheet" href="/components/com_jfbconnect/assets/jfbconnect.css" type="text/css" />
The topic has been locked.
Support Specialist
12 years 2 months ago #42674 by alzander
The {JFBCLogin} tag is parsed by a system plugin after the full template has rendered. That means that we can't use the addStyleSheet() function because the head of the document has already been rendered.

Instead of using the {JFBCLogin} tag, you can add your own custom HTML if you'd prefer. The main thing is that your button, image or text calls the jfbc.login.provider('facebook') Javascript, like:
<a class="show" id="sc_fblogin" href="javascript:void(0)" onclick="jfbc.login.provider('facebook');"><img src="/media/sourcecoast/images/provider/button_facebook.png" alt="Login With Facebook" title="Login With Facebook"/></a>
You can update that however you want, but that HTML should work right away.

I hope that helps gives you some more information and ideas for workarounds, but if not, or you need more help, just let me know.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
12 years 2 months ago - 12 years 2 months ago #42681 by webfoundryuk
Thanks, that makes sense. But I can't just add such button because I also need to change <html> tag, add meta tags, scripts etc.

So please at least change this <span> to <div> and check why W3C doesn't like <link> code.
Last edit: 12 years 2 months ago by webfoundryuk.
The topic has been locked.
Support Specialist
12 years 2 months ago #42689 by alzander
The validator doesn't like the <link ..> tag because, according to HTML 5 spec, it should only be used in the head area. All browsers work just fine with it in the body of the document though.

But I can't just add such button because I also need to change <html> tag, add meta tags, scripts etc.

I'm not sure what you mean here. For JFBConnect, you don't need to add any tags in the html, meta tags area or scripts. If you just replace the {JFBCLogin} tag with direct HTML, everything else should work just fine.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
12 years 2 months ago #42701 by webfoundryuk
Sorry, yes, tags and are auto-added.
I thought they are added only if {JFBCLogin} tag is found on a page (sounds like a correct behavior in fact).
The topic has been locked.
Support Specialist
12 years 2 months ago #42708 by alzander
I'm not sure tags you're talking about that you thought would only be loaded in {JFBCLogin} was on the page. Things like Open Graph tags are always added, because anyone can share your page. If there's something else you were thinking about, just let us know.

Either way, I'm glad to hear it sounds like we got you going here. Should you need anything else, just let me know.

Thanks,
Alex
The topic has been locked.