Jquery gradient behavior applies to all but first URL

Question

I've got a page that shows my photography portfolio. I'm trying to do a jquery gradient on the text, and it's working on all but the first link. Here's the html:

<h1><a href="portfolio/engagements"><span></span>engagements</a>  | </h1><br>
<h1><a href="portfolio/weddings"><span></span>weddings</a>  |  </h1>    <br>
<h1><a href="portfolio/bridals"><span></span>bridals</a>  |  </h1>  <br>
<h1><a href="portfolio/families"><span></span>families</a>  |  </h1>    <br>
<h1><a href="portfolio/seniors"><span></span>seniors</a>  </h1>     <br>

And here's the jquery call:

$(".jquery h1").prepend("<span></span>");

And here's the css for it:

.gradient4 span {
    background: url(images/gradient-dark.png) repeat-x;
    position: absolute;
    bottom: -0.1em;
    display: inline;
    width: 100%;
    height: 29px;
}

The problem I'm having is that all urls but the first link (currently 'engagements'), have the gradient effect. Any ideas why the first link isn't working?

Answer 1

This is more of a design question as it turns out, but to give you an idea of what is happening, the <span> element that provides the gradient overlay is shifted way off to the left.

Here's a screen shot of the issue.

Look at the blue highlighted box all the way on the left. That's your overlay. It is positioned incorrectly somehow.

Answer 2

I think that the problem is that when you prepend the <span> and set with position:absolute, the first element is going to inherit its top- and left-values from its parent and, in this case, appear at the top-left position. Instead of using the <span>s, why not manipulate the <h1> using addClass and removeClass. Its hover state would get rendered as <h1 class="gradient"> and its normal state it's just plain <h1>.