fix erors from validator.w3.org

Hi,

I need to fix errors that show on the validator.w3.org.
I managed to fix most of them but there are a couple of errors that I cannot fix.

Just for example I will run the test for your demo and not my page.
You can see the results here https://validator.w3.org/nu/?doc=https%3A%2F%2Fwoodmart.xtemos.com%2F
There are 123 errors and 22 warnings.
The error 138, is the one that I need help with.
The error says: Element style not allowed as child of element body in this context.
How can I solve this issue?

Also on error 46 it says Bad value for attribute srcset on element img: Must contain one or more image candidate strings.
How is it possible to solve this also?

Hello,

Since our site is just a demo and not a working store we have a lot of links placeholders that generate the following errors https://gyazo.com/95b0198caffdcba6229b04590a40edd5
In a real store, you should have all links with real URLs.
Style tags can’t be fully eliminated from the code since they are required for a lot of dynamic styles like dropdown size, styles generated by WPBakery/Elementor, etc.
There are other errors like missed ALT attributes for images but you need to specify them on your website and it is not something that we should fix in our theme.

Kind Regards

Ok, let me ask this again.
I need help with the error 46. It says:
Error: Bad value for attribute srcset on element img: Must contain one or more image candidate strings.

From line 1921, column 1; to line 1921, column 769

430px"/>↩<img width="430" height="491" src="https://z9d7c4u6.rocketcdn.me/wp-content/themes/woodmart/images/l…, https://z9d7c4u6.rocketcdn.me/wp-content/uploads/2016/09/product-furniture-4-2-430x491.jpg 430w" />↩</pic

And this is not a missing ALT error. The error is about the srcset

Yes, the srcset is empty by default because the lazy loading option is activated. If you disable this option the srcset will be filled by default.

Thank you.

I see this style added in the code

<style id='woodmart-inline-css-inline-css'>
.wd-5d49bf3be7bf0 svg {}
.wd-5d49bf41277d5 svg {}
.wd-5d49bf4fd9b6a svg {}
</style>

I guess it does not do something specific. Is there a way to remove this part totally?

Hi,

Could you please send us a link to your website where we can see this issue?

Kind Regards

here it is

We will fix this issue in our next theme update.

Is it possible to have an early access to the fix. It is really crucial for me and I need it as soon as possible.

Try to edit the following file woodmart/inc/shortcodes/row-divider.php and remove the following code https://take.ms/8l0Bq

That did not work.
I copied the file in the child theme folder woodmart-child/inc/shortcodes/row-divider.php and the deleted the part of the code that you mention but it did not change anything.
I still get the same error, I still see the below in my code.

<style id='woodmart-inline-css-inline-css'>
.wd-5d49bf3be7bf0 svg {}
.wd-5d49bf41277d5 svg {}
.wd-5d49bf4fd9b6a svg {}
</style>

You just need to change this in the parent theme. Anyway this fix will be applied in our next theme update.

Changing it in the parent theme did the trick for me. Thank you.
One more question.
I also see this in the code

<style id='rs-plugin-settings-inline-css'>
#rs-demo-id {}
</style>

how to fix this?

This code is generated by the Slider revolution. Sorry, but we don’t have a fix for this.

ok thank you!

If I use the megamenu option https://prnt.sc/1rhsnh1 or https://prnt.sc/1rhso6q
I get an error Error: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)

When I check the code of the page I get this <style data-type="vc_shortcodes-custom-css"></style>
Since it does not do anything can I just remove it somehow?

Thank you!

The megamenu is currently not enabled on my site since it throws errors.
Even with the file woodmart/inc/shortcodes/row-divider.php edited as you suggested I still get the above error when I enable the mega menu.

Hi,

1. Mega menu CSS will be moved to a new file in our next theme update.

2. Could you please send us a link to the page where you see this empty style tag for WPBakery shortcode CSS?

Kind Regards

I told you I see this empty tag as soon as I enable the mega menu like this https://prnt.sc/1rhsnh1 or https://prnt.sc/1rhso6q.

It is for the site forkid.gr but I have disabled the magamenu because it is causing the error.

If you help me to solve this I will reenable the megamenu.

When is the new theme update coming?

The mega menu style tag will be fixed in our next update. Do you mean that this tag appears also when the mega menu is activated? <style data-type="vc_shortcodes-custom-css"></style>

The above tag appears only when the mega menu is activated.

OK, this bug will be fixed in our next theme update too.

Ok. When do you plan to publish the update?

We don’t have an exact date yet but hope to release it next month.

Hi,

I want to fix another error also.
When I check the demo website from wave.webaim.org
https://wave.webaim.org/report#/https://woodmart.xtemos.com/
I see the below error for the categories images
https://prnt.sc/1t8vqkw

This error is generated because the category element generates the bellow code:
<a href="https://woodmart.xtemos.com/product-category/clocks/" class="category-link wd-fill"></a>
This code does not contain any link so it show the error.
One solution would be to add the category name.
Another solution would be something like this

<a href="https://woodmart.xtemos.com/product-category/clocks/" class="category-link wd-fill"><span class="sr-only">Clocks (aka category name)</span></a>

<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
</style>

Solution found on stackoverflow.

Since accessibility is a very important issue I really need to fix this.
I want to use many elements of your theme but some of theme are not accessibility friendly.
Can you please tell which file to edit in the theme?
I am trying to edit this section https://prnt.sc/1t8w8km

Hello,

Yes, we will fix all empty links in our next theme update.

Kind Regards

Hi,

While checking this demo https://woodmart.xtemos.com/demo-alternative-energy/demo/alternative-energy/
on W3 validator I saw few more errors that has to do with how your theme handles staff.
You can see the results of the test here

Error: CSS: background-image: The first argument to the linear-gradient function should be to left, not left.

From line 1122, column 694; to line 1122, column 1210

t-enable"><div class="woodmart-row-gradient wd-fill" style="background-image:-webkit-linear-gradient(left , rg…80%);background-image:-ms-linear-gradient(left , rgb(142, 203, 222) 80% , rgb(255, 255, 255) 80%);"></div>

Also this errors

Error: Attribute ; not allowed on element div at this point.

From line 1207, column 72; to line 1207, column 205

-wrapper"><div class="wd-video-poster" style="background-image:url(https://z9d7c4u6.rocketcdn.me/wp-content/uploads/2019/06/ae-video-img.jpg)";></div>

Attributes for element div:
    Global attributes

Error: The frameborder attribute on the iframe element is obsolete. Use CSS instead.

From line 1207, column 249; to line 1207, column 450

div></div><iframe src="https://player.vimeo.com/video/51589652?dnt=1&app_id=122963" width="500" height="281" f…meborder="0" title="Timelapse - Lighthouse (Oct 2012)" allow="autoplay; fullscreen" allowfullscreen></ifra

Is there a quick fix for the above errors?

Attachments:

You must be logged in to view attached files.

Hello,

We will review the gradient error since it comes with JS library so our theme doesn’t control it.
The other one about backrgound-image property will be fixed in our next update.
As for the iframe error, it comes with WordPress standard shortcode so it also can’t be fixed in our theme scope.

Kind Regards

Hello,

Just update the theme to 6.2.2 and now I have 2 new errors on https://validator.w3.org.
You can check the full report here https://validator.w3.org/nu/?doc=https%3A%2F%2Fforkid.gr%2F.

Error: CSS: Parse Error.
At line 601, column 36
er{height:868px}@media (max-wi

and this

Error: Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)
From line 1422, column 1; to line 1422, column 43
='all' />↩<style id='woodmart-inline-css-inline-css'>↩.wd-5
Contexts in which element style may be used:
    Where metadata content is expected.
    In a noscript element that is a child of a head element.
Content model for element body:
    Flow content.

Attachments:

You must be logged in to view attached files.

Hi,

The first one seems to be caused by some custom CSS added on your website https://prnt.sc/1zo75xo
As for the second one, we will release an update with the fix soon.

Kind Regards

The error with the megamenu was not fixed even after the last update.

I get the same error

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

When I check the code of the page I get this <style data-type="vc_shortcodes-custom-css"></style>

Is there a way to fix this?
Should I do some extra steps after updating to version 6.2.3?

[Author]

Posts