w3 validator Error: Element style not allowed as child of element body - HTML forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

w3 validator Error: Element style not allowed as child of element body

w3 validator

the black planet

7:08 am on Jun 9, 2021 (gmt 0)

Hello to the community! I'm quite inexperienced with html as I'm mostly working with Wordpress. I have a site to validate with w3 validator and it shows me a bunch of errors that have stuck me completely, although I have some experience validating sites (I haven't created this site myself, I was just given the job to validate). One error that shows is the following:
Error: Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)
From line 91, column 291; to line 91, column 313

r="0"></a><style type='text/css'>img#wp

My problem begins that I can't identify the line of code in question. If I press f12 I see the following code in lines 89-95

<!-- Inline jetpack_facebook_likebox -->
<style id='jetpack_facebook_likebox-inline-css' type='text/css'>
.widget_facebook_likebox {
 overflow: hidden;
}

</style>

So I guess the error has to do something with the facebook like button widget but searching on all the .php files I couldn't find any similar line of code. The site is <snip> and it's in greek unfortunately. Anybody pls have a clue cause I'm trully desperate. Thank you in advance for your time, good day to everyone!

[edited by: engine at 10:31 am (utc) on Jun 9, 2021]
[edit reason] no specifcs, thanks, please see WebmasterWorld TOS [/edit]

NickMNS

2:48 pm on Jun 9, 2021 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Error: Element style not allowed as child of element body in this context.

The error is pretty explicit as to the problem. You have a <style> tag inside your <body></body> tags. The <style> tag needs to be located between the <head> </head> tags.

lucy24

4:22 pm on Jun 9, 2021 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

On top of that ... is a <style> even allowed to have an id? Is it possible two bits of paste-in got garbled?

Incidentally, you no longer need to specify "type='text/css'" with styles, though for some reason you do still need to say it with linked stylesheets. (Not long ago w3's html and css validators went through an entertaining phase where one of them said you must include this property, while the other said it's superfluous. They have now reached agreement.)

the black planet

6:54 am on Jun 10, 2021 (gmt 0)

Thank you all for your answers! My biggest problem is that it's a Worpress site and I can't edit the source code directly. I can only have access to the php, css and js files produced by wordpress so the notifications from w3 validator give me little clues cause I usually cannot find the lines of code that I see when I press f12. For the current error for example I searched through all the php files but could find only a handfull of lines of code that contain the term <style>, all are found in a file called class-tgm-plugin-activation.php and are all the same, like this one:

echo '<style type="text/css">#adminmenu .wp-submenu li.current { display: none !important; }</style>';

Also the current error I wrote you about contains the line type="text/css" but there are also other errors like this one:

Error: Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)

From line 85, column 3; to line 85, column 52

/style>&#8617;<style type="text/css" id="custom-background-css">&#8617;body.

I also gave it a try to erase these lines of code from class-tgm-plugin-activation.php and move the to the <head> section of the header.php file but didn't work as well...

NickMNS

8:35 pm on Jun 10, 2021 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

@Lucy24

is a <style> even allowed to have an id?

Yes, it is a global attribute.

The reason to give it an id is to make it easier to access with JS. My guess, is that in this case it appears to be part of some FB widget so their is likely some JS code using it.

@the black planet
Nobody really cares about the W3 validator. It's a nice to have, but there is no hard fast rule that your page must validate. Google doesn't check or care and each browser has its own way of dealing with the code and rendering around "less than valid code". Browsers are designed to fail in a friendly manner, and when something doesn't work they should let you know via error messages in the console. What you really need to check is that Googlebot renders the content in the way you expect and that your code is functional in all the major browsers. Then if some code element fails validation check, then so be it.