Question

If you look at my code it looks fine.

This is what I’m putting in the source:

<ul id="blinds1" class="window"></ul>

This is a rough idea of what the browser spits out after the jQuery is run:

<ul id="blinds1" class="window">
<li style="background-position: 0px 0px;" class="image"></li>
<li style="background-position: -40px 0px;" class="image"></li>
</ul>

This is the jQuery I’m using:

$(document).ready(function(){
   $(".window").addBlinds();
});

jQuery.fn.addBlinds = function() {
    if ( this.exists() ){
        return this.each(function() {
            var ul = $(this), sect = 0, size = 12, loc = 0, time = 200;

            addSection();

            function addSection() {
                if (sect < size) {
                    setTimeout(function(){  
                        var section = $("<li />")
                        .css({backgroundPosition: loc+"px 0px"})
                        .addClass("image");
                        ul.append(section);
                        section.slideDown(time, "swing");
                        loc-=40;
                        sect++;
                        addSection();
                    }, time);
                }
            };

            ul.append("<div class='clear' />");
        });
    } else { return false };
};

.exists() was a little plugin I created just for the sake of not confusing myself later on when I look at my code.

Oooookay! Now to the point that has me stumped.
For some reason when I go to the markup validation I get this:

Line 61, Column 41: end tag for “ul”
which is not finished

URL of page in question: http://www.blanktree.com/about/

URL of validation page: http://validator.w3.org/

Can anyone help me out here? What the heck is going on? hahaha

Somewhat Resolved:

Apparently there has to be an existing child <li></li> in the parent <ul></ul> even before the javascript is called for it to accept it as valid code. I simply put an empty child in there to clear the error. However…. This is more of a work around than a resolution. This seems like an issue with the validator more than it is with my code. Is there a better way I should be going about this?

Help is appreciated.

Answer 1

I don’t think there’s any way to make an empty list (as-is) valid. You can either:

• creating a temporary empty li (as you’ve already discovered)
• use a placeholder div, and either append the ul to it, or replace the div with the ul, in the addBlinds plugin.