meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

S5 Validity

Over the past few days, I’ve gotten a few complaints about S5 breaking in one browser or another—IE6 and Safari got the most mentions, but there were others.  As an example, there was a report that the slide show would just stop working after a certain number of slides.  In every case I’ve seen so far, these problems have been caused by invalid XHTML.

The most common validation problem I expect people to run into is with the structuring of lists.  For example, suppose you want two levels of lists on a slide.  You do it like this:

<ul>
<li>point one</li>
<li>point two
   <ul>
   <li>subpoint one</li>
   <li>subpoint two</li>
   </ul>
</li>
<li>point three</li>
<li>point four</li>
</ul>

Notice how the nested list is inside the li element?  That’s correct.  You should never put nested lists between list items on the ‘outer’ list, even though a lot of people have made that a habit.  The only element that can be a child of a ul (or an ol) element is an li.  That’s it.  Anything that needs to be ‘nested’ goes inside one of the list items.

Alternatively, you can put structures after the list, if that’s what you want.  As an example:

<ul>
<li>point one</li>
<li>point two</li>
<li>point three</li>
</ul>
<pre>
...code sample...
</pre>

Nothing wrong with that, as long as you keep the side content inside the <div class="slide">...</div> element.  Or you could put your pre inside the last list item.  It’s really up to you.

Remember that S5 stands for “simple standards-based slide show system”.  That’s not just marketing: the CSS and scripts pretty much depend on valid markup structures.  If the markup is invalid, it will very likely lead to confusion and unexpected results.  In other words, violate the standards and they’ll violate your slide show.  There’s a certain poetic symmetry in that, I think.

(And yes, I do know that as of posting, this entry doesn’t validate.  Believe me, the irony is not at all lost on me.  This happened because I haven’t gotten around to fixing WordPress so it strips HTML before inserting the entry title into the title element.  I ranted about the problem a while back… and it will eventually get fixed.  Possibly when I upgrade to the next version of WP.)

12 Responses»

    • #1
    • Comment
    • Tue 26 Oct 2004
    • 1433
    Gabriel Mihalache wrote in to say...

    Maybe browsers should implements something like document.isValid() so you can just go
    if (document.isValid() { … } at least for XHTML/XML. Mozilla already does this IIRC for XHTML served with the proper content type.

    • #2
    • Comment
    • Tue 26 Oct 2004
    • 1623
    Ralesk Ne’vennoyx wrote in to say...

    Amusingly, TeX does it the “HTML-wrong” way and lists may not be a part of a list element.

    \itemize{
    \item{blahitem}
    \item{blahitem}
    \enumerate{
    \item{blah point one}
    \item{blah point two}
    }
    \item{blahitem}
    \item{blahitem}
    }

    (And hereby I hope I remember the macro names properly!)

    • #3
    • Comment
    • Tue 26 Oct 2004
    • 1706
    Robert Whittaker wrote in to say...

    AFAIK, The item command doesn’t take any (mandatory) arguments (at least in LaTeX). The item content then continues until the next item command is encountered. Hence the sub items are logically part of their parent.

    http://www.giss.nasa.gov/latex/item.html

    • #4
    • Comment
    • Tue 26 Oct 2004
    • 1712
    Ant wrote in to say...

    About that HTML-in-places-it-shouldn’t-be problem…
    Maybe a bit of unicode would help in this case?

    • #5
    • Comment
    • Tue 26 Oct 2004
    • 1946
    Aaron Tate wrote in to say...

    Eric,

    I have a solution to your issue with wordpress.

    If you go to your wordpress directory and open index.php (assuming it hasn’t been renamed), with in index.php look for:

    <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

    Then remove it and replace it with:

    <title><?php bloginfo('name'); ?><?php strip_tags(wp_title()); ?></title>

    That should fix it.

    I’m only happy to be able to help someone a little who has helped me so much more.

    • #6
    • Comment
    • Tue 26 Oct 2004
    • 2010
    Jeff Walden wrote in to say...

    The previous comment isn’t enough. What about feeds, email notification of comments, (default) permalinks (as mentioned in the post), etc.? Also, what about the blog name itself? I’ve named mine “y^0?”, where the 0 is superscripted. This screws up quite a few different things that I’ve never made the time to properly fix (it’s been mostly hacked away by editing the bloginfo() function, but it’s not completely fixed).

    • #7
    • Comment
    • Tue 26 Oct 2004
    • 2013
    Jack wrote in to say...

    I’ve got to say, Eric, that the slideshow looks fantastic in Firefox PR. Simply amazing!

    But then again, so is all your work; I learned a great deal about CSS from your articles. This implementation of it is astounding; as I don’t have PowerPoint but do have constant ‘net access, guess what I’ll be using for presentations from now on? . . .

    • #8
    • Comment
    • Tue 26 Oct 2004
    • 2013
    Golyc wrote in to say...

    Can´t i put this :

    • SomeThing

    • AnotherThing

      • SomeThingSecundary

        Sorry is IS that you mean … My ensligh isn´t perfect at all ^^ !

    • #9
    • Comment
    • Tue 26 Oct 2004
    • 2055
    Aaron Tate wrote in to say...

    Jeff:

    It wasn’t meant to be an entire lecture on every step needed to remove html tags from the site, the rss 0.9, rss 1.0, rss 2, atom feed etc title,
    It was a basic here’s the quickest way of removing html tags from your page title, i’m sure he can figure out how to apply it to wp-rss/atom and the blog name.

    Another quick question why is it that you have <b> in your allow tags list?

    • #10
    • Comment
    • Wed 27 Oct 2004
    • 1206
    Dave wrote in to say...

    In regards to the second comment:
    I don’t know TeX very well at all, but it seems to me that you might treat the braces as start an close tags. Therefore, instead of:

    \itemize{
    \item{blahitem}
    \item{blahitem}
    \enumerate{
    \item{blah point one}
    \item{blah point two}
    }
    \item{blahitem}
    \item{blahitem}
    }

    could you do:

    \itemize{
    \item{blahitem}
    \item{blahitem
    \enumerate{
    \item{blah point one}
    \item{blah point two}
    }
    }
    \item{blahitem}
    \item{blahitem}
    }

    • #11
    • Trackback
    • Fri 29 Oct 2004
    • 1139
    Received from gatorace.com

    Alternative Presentaions
    I’m stealing from other blogs today, but that’s where the best information comes from these days.A post on “Joel on Software” refers to a new presentation option created by CSS guru Eric Meyer. S5, as it has been named, is…

    • #12
    • Comment
    • Wed 3 Nov 2004
    • 2132
    Ken wrote in to say...

    FYI: as a proof-of-concept I ported S5 into MovableType. You can view the results here http://kwc.org/presentations/. If people like, I’ll write up some better instructions on how it was done (quite simple, though requires the MTKeyValues plugin).

    Thanks for creating this. I had done a presentation using MovableType as the engine before, but this is orders of magnitude better and accomplishes the same goals (Web-readable semantic markup, Web-accessible and editable).

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


October 2004
SMTWTFS
September November
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Sidestep

Feeds

Extras