Question

Need help getting the list within the wrapper div. Also the images that I have as “items” are slightly different widths, either way I feel there is a solution, however, I just can’t seem to find it. If anyone knows of a simpler code for fade hover effect maybe that’s easiest. The jquery is pretty good here just having problems positioning. Thanks!

Here’s what it looks like thus far –
http://marisareviewsfilms.com/demo

Here’s how I want it to look – http://marisareviewsfilms.com/lisa#

My CSS (the borders are just to guide me for now):

#wrapper {
width: 827px;
height: 577px;
padding: 0px;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
border: 1px solid blue;
}

.gallery li {
float: left;
margin-left: 0px;
margin-right:0px;
margin-top: 0px;
margin-bottom: 0px;
list-style-type: none;
height: 577px;
display: ;
width: 129px;
position: relative;
border: 1px solid green;
}

img.grey {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

img.color {
position: absolute;
left: 0; 
top: 0;
}

Answer 1

Your code seems to be fine. However, the browser defaults are messing with the positioning.

Just change the following

1. At the beginning of the css apply a reset css.
2. Add a clearfix class to the ul.gallery

Update

The image slices you are using are 131px, except the first, and last one (which are 148px, 151px respectively).
So change this in the CSS :

.gallery li {
    width: 131px;
}
.gallery li:first-child {
    width: 148px;
}
.gallery li:last-child {
    width: 151px;
}

However, this will work on all modern browsers.
In case you want to support IE7,8,
add classes to the first and last li, and then put the css accordingly (as above).

<li class="first">
...
<li class="last">

NOTE : Do remove the green/blue borders, since they would take 1px width each.