0

My s3slider is working perfectly, but I cannot get it to validate. I keep getting the error message "document type does not allow element "div" here; assume missing "li" start-tag [XHTML 1.0 Transitional]" and "end tag for "li" omitted, but OMITTAG NO was specified [XHTML 1.0 Transitional]".

Lots of people use this slider, so they just all have invalid code? The problem is the <div class="clear s3sliderImage"></div> nested inside of the <ul>. If I place it outside of the ul, the last image of the silder doesn't show - just like the author points out in the link below.

See s3slider code and instructions here. 

<div id="s3slider">
<ul id="s3sliderContent">
    <li class="s3sliderImage">
        <img src="#">
        <span>Your text comes here</span>
    </li>
    <li class="s3sliderImage">
        <img src="#">
        <span>Your text comes here</span>
    </li>
    <div class="clear s3sliderImage"></div>
</ul>

ALN929
  • 3
  • 1
  • "so they just all have invalid code?" - Yes. – Alohci Feb 02 '14 at 01:01
  • @ Alochi - I read your [thread on questioning HTML5 validation](http://stackoverflow.com/questions/432933/will-html-5-validation-be-worth-the-candle) which was helpful. This is the only thing on my site that doesn't validate, which annoys me, but it's not affecting anything else, and is neccesary for function. Think I'm just gonna roll with it and leave it alone. Thanks for the input! – ALN929 Feb 03 '14 at 00:40

1 Answers1

0

The only valid child of a ul is an li. To get this to validate, move the clearer inside the last li, or outside the ul.

Better, set overflow: hidden on li.sliderImage and skip the clearing div altogether. In fact, removing it on the demo page doesn't seem to have any adverse effects, at least in Chrome. My guess is that it's a fix for old IE issues.

isherwood
  • 58,414
  • 16
  • 114
  • 157
  • Unfortunately, the last image doesn't show up if I add `overflow: hidden;` and skip the div. It also doesn't show up if I move it outside of the ul. Moving the div inside of the last li works (last image still showing), but now validation says "document type does not allow element "div" here; missing one of *object*, *applet*, *map*, *iframe*, *button*, *ins*, *del* start-tag[XHTML 1.0 Transitional]". Guess this slider just wasn't built to validate? I assumed the same about it being an old IE fix, but when I preview in Chrome, FF, IE 11, Safari, and Opera the last image doesn't appear. – ALN929 Feb 03 '14 at 00:15