Support » Plugin: Slideshow » [Plugin: Slideshow] Validation error for HTML5 theme

  • 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(‘’) 0 0 no-repeat;


    .slideshow_container_1434279716 .pause {

    background: url(‘’) -15px 0 no-repeat;


    .slideshow_container_1434279716 .button {

    margin-top: -20px;

    height: 40px;

    width: 19px;

    background: url(‘’) 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>



    Any ideas on how to fix this?


Viewing 1 replies (of 1 total)
  • Plugin Author Stefan Boonstra


    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,

Viewing 1 replies (of 1 total)
  • The topic ‘[Plugin: Slideshow] Validation error for HTML5 theme’ is closed to new replies.