Jquery gradient behavior applies to all but first URL
- by Dustin
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?
