Drapetomaniac

There are several posts and questions going back years about the jquery plugin jCarousel not working in Chrome or Safari.

Basically, instead of loading, you see a straight unordered list.  While there were many teaks to the code offered, and the code base the recommendations pointed to were dated – I had the idea to look for bad html  the code since the plugin basically structures and organizes a list into a pretty-pretty format for me.

After closing some image tags properly, all that was left was to validate the html.  For some reason, while creating a row of thumbnails with text and links, I ended up with something like:

<li>
<a href=”etc”>
<div><img src=”thumb.jpg” alt=”" /></div>
<span>text under thumbnail</span>
</a>
</li>

All I had to do was remove the <div> from inside the a tag.  Putting blocky elements inside an a tag isn’t valid.

The amusing part is everything I saw pointed at the maker of the plugin, it makes me wonder how many people validated the html they were using the plugin against.

Another problem I ran into was when I accidentally initiated the carousel twice, it pushed the buttons in two extra <li> widths, so the carousel started from the center.