How can I get :hover state for jCarousel arrows to work?

I'm using the jQuery "jCarousel" plugin to create a carousel of NFL player photos. Everything works great, except the next/previous arrows in the carousel. They don't respond to the CSS rules I created for their :hover states.

Here's a single example page with the HTML and CSS: http://www.joshrenaud.com/pd/picks/jCarouselProblem.html

The style rule for the arrow works fine:

.jcarousel-skin-tango .jcarousel-next-horizontal {
    opacity: 0.6;
    position: absolute;
    top: 10px;
    right: 0px;
    width: 20px;
    height: 135px;
    cursor: pointer;
    background: transparent url(graphics/right-arrow.png) no-repeat 0 0;
    }

But the style rule for the hover state does not:

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    opacity: 1;
    }

I tried using Firebug to figure out what's up, but I'm still coming up empty. It shows me that it knows about the :hover styles for the list elements. But when I inspect the arrows, it's as if the :hover rules don't apply to those elements.

Solution

It's because you haven't included the typical boilerplate HTML. Your page is rendering in Quirks Mode.

If you add something like this:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

and slot the rest of your code where it should go, it will work.

Here's a previous answer I wrote where the problem was the same thing:

CSS Hover+Background Image