Invalid HTML in cookie notice markup

Resolved Rick Curran
(@rickcurran)

3 years, 6 months ago
Hi,
I am doing some HTML validation work on a client site and testing it using the validator at https://validator.w3.org. The validator is highlighting the invalid usage of a div element within a span element within the cookie notice.

There is actually a closed issue about this in this support channel, however it incorrectly guides people to edit the markup in the plugin settings in WordPress at Cookie Law Settings > Customise cookie bar > Message. That Message text / markup is the content that is wrapped by the span tag within the cookie notice markup and it is not possible to edit that parent span there.

Ideally this would be changed to use a div element instead.

Looking at the source code the span tag that wraps it is found at line 240 of this source file:

https://plugins.trac.ww.wp.xz.cn/browser/cookie-law-info/trunk/legacy/public/class-cookie-law-info-public.php#L240

I can see there is a CSS style specifically targeting that span element:
```
#cookie-law-info-bar span {
	vertical-align: middle;
}
```
This is at line 25 of:

https://plugins.trac.ww.wp.xz.cn/browser/cookie-law-info/trunk/legacy/public/css/cookie-law-info-public.css#L25

This would need updated to refer to div.

Thanks for your time, I apologise if there is some specific reason why a span has been used here, hopefully I’m not presenting an overly simplified solution to the issue.

The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

Thread Starter Rick Curran
(@rickcurran)

3 years, 6 months ago

Hi, after posting these I realise one potential reason for a span parent is to align it without affecting the child div elements and cascading the vertical-align styling down to them. If this is the case then perhaps switching the span to a div with a specific class so that the css can be applied only to it, e.g. div.cli-bar-parent.

Plugin Support CookieYes Team
(@cookieyesteam)

3 years, 6 months ago

Hi @rickcurran,

Greeting from CookieYes!

We agree with what you’ve mentioned. Many of our customers found our solution to be effective. Since any modification to the HTML template could also affect current users, the workaround cannot be quickly implemented in our plugin.

If it is possible, you can switch to our revamped interface by going to the Advanced tab and clicking on the “delete settings and reset’ button. The issue will not be there in the revamped interface. However, switching to this interface will wipe out all of your current configurations on the plugin, and you have to start from the beginning.

We sincerely hope you can understand us.
Thread Starter Rick Curran
(@rickcurran)

3 years, 6 months ago
Hi @cookieyesteam, thanks for getting back to me. I followed those steps to switch to the revamped interface, however whilst this has resolved the issue with the span tag when validating the page it is now raising another error in the validator:

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

It’s highlighting the use of the following style block within the contents of the body tag:
```
<style id="cky-style-inline">
[data-cky-tag] {
    visibility: hidden;
}
</style>
```
Is intentional that this style block is implemented this way and not within the head element as style blocks should be? If not can this be fixed?

Thanks again for taking the time to reply!
Plugin Support CookieYes Team
(@cookieyesteam)

3 years, 5 months ago

Hi @rickcurran,

We agree with what you discovered. This has been added to our backlog. We’ll solve that in the plugin’s upcoming update. Will you be able to wait till then?

Thread Starter Rick Curran
(@rickcurran)

3 years, 5 months ago

Hi @cookieyesteam, thanks, great to hear it will get fixed in the next update. Thanks again for looking into these issues!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Invalid HTML in cookie notice markup’ is closed to new replies.

Tags