WordPress.org

Ready to get started?Download WordPress

Forums

Slideshow
Validation error for HTML5 theme (2 posts)

  1. schepers
    Member
    Posted 1 year ago #

    Hi,

    Firstly - great plugin! Worked first time and does everything I need.

    However, I tried to validate a new website using W3C validation and I received the following error:

    ----

    Line 146, Column 25: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)
    <style type="text/css">

    Contexts in which element style may be used:
    If the scoped attribute is absent: where metadata content is expected.
    If the scoped attribute is absent: in a noscript element that is a child of a head element.
    If the scoped attribute is present: where flow content is expected, but before any other flow content other than inter-element whitespace, and not as the child of an element whose content model is transparent.
    Content model for element div:
    Flow content

    ----

    The piece of code this relates to is this (taken from source):

    <div style="display: none;">

    2.1.12 </div>

    <style type="text/css">

    .slideshow_container_1434279716 { }

    .slideshow_container_1434279716 .slideshow { }

    .slideshow_container_1434279716 img { }

    .slideshow_container_1434279716 .slide {

    margin-right: 2px;

    }

    .slideshow_container_1434279716 .transparent {

    filter: alpha(opacity = 50);

    opacity: 0.5;

    }

    .slideshow_container_1434279716 .transparent:hover {

    filter: alpha(opacity = 80);

    opacity: 0.8;

    }

    .slideshow_container_1434279716 .description {

    background: #000;

    }

    .slideshow_container_1434279716 .controlPanel {

    width: 21px;

    height: 21px;

    background: #000;

    border-radius: 2px;

    -moz-border-radius: 10px;

    }

    .slideshow_container_1434279716 .controlPanel ul { }

    .slideshow_container_1434279716 .controlPanel ul li {

    margin: 3px;

    width: 15px;

    height: 15px;

    }

    .slideshow_container_1434279716 .controlPanel ul li:hover { }

    .slideshow_container_1434279716 .play {

    background: url('http://www.blowhair.co.nz/wp-content/plugins/slideshow-jquery-image-gallery/images/SlideshowPlugin/light-controlpanel.png') 0 0 no-repeat;

    }

    .slideshow_container_1434279716 .pause {

    background: url('http://www.blowhair.co.nz/wp-content/plugins/slideshow-jquery-image-gallery/images/SlideshowPlugin/light-controlpanel.png') -15px 0 no-repeat;

    }

    .slideshow_container_1434279716 .button {

    margin-top: -20px;

    height: 40px;

    width: 19px;

    background: url('http://www.blowhair.co.nz/wp-content/plugins/slideshow-jquery-image-gallery/images/SlideshowPlugin/light-arrows.png') no-repeat;

    }

    .slideshow_container_1434279716 .previous { }

    .slideshow_container_1434279716 .next {

    background-position: -19px 0;

    }

    .slideshow_container_1434279716 h2,

    .slideshow_container_1434279716 p,

    .slideshow_container_1434279716 a {

    text-decoration: none;

    color: #fff;

    text-align: center;

    }

    .slideshow_container_1434279716 h2 {

    margin: 5px;

    font-size: 25px;

    }

    .slideshow_container_1434279716 p {

    margin: 7px;

    font-size: 15px;

    } </style>

    </div> </div>

    </div>

    ----

    Any ideas on how to fix this?

    Thanks
    Ron

    http://wordpress.org/extend/plugins/slideshow-jquery-image-gallery/

  2. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Ron,

    Usually a stylesheet would go into the <head> area of the website and this is what the W3C validator expects us to do. The problem is that every slideshow is always called after the <head> tag, so the pages it will and will not be on cannot (easily) be predicted and therefore only when the slideshow is called can it deploy its stylesheet.

    The stylesheet could be moved up into the <head> tag using javascript, but this would only have effect in the browser, not the W3C validator.

    Another option could be to remember at what page what slideshows were shown, and use that information to decide what stylesheets should be loaded. This, however, brings up some other difficulties.

    I have added the issue to the project board, but I do not know when I'll be able to address it, since there are some other big changes that have now been waiting for some time.

    Best regards,
    Stefan

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.