[Solved] CSS Sprites Issues

[CJSweatt]

I’ve been toying around with CSS Sprites, and have it working just like I want on my homepage.

On my secondary page, however, I’m using the same concept, but the images will not line up like they should. (http://www.usm.edu/pfta/new/index.php/pfta/chair/)

Can anyone take a quick look at my css and help out?

This is what I have for the images:

Code:

/* —– ROLLOVER NAVIGATION SECONDARY PAGES */

#side_nav li {
list-style-type:none;
list-style-position: outside;
list-style-image:none;
}

#side_nav li a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://www.usm.edu/coal/new/pfta_webgraphics/side_nav.png) no-repeat scroll 0 0;
display:block;
margin:0;
height:170px;
width:127px;}

#side_nav li a.item1 { background-position: 0 0; }
#side_nav li a:hover.item1:hover { background-position: 0 -137px; }

#side_nav li a.item2 { background-position: 0 -274px; }
#side_nav li a:hover.item2:hover { background-position: 0 -411px; }

#side_nav li a.item3 { background-position: 0 -548px; }
#side_nav li a:hover.item3:hover { background-position: 0 -685px; }

#side_nav li a.item4 { background-position: 0 -822px; }
#side_nav li a:hover.item4:hover { background-position: 0 -959px; }

And here’s my HTML

Code:

I don’t see why it works on the homepage (http://www.usm.edu/pfta/new/), but it doesn’t on the other pages…

[CJSweatt]

WOW! I feel like a complete moron…

Thank you so much! I have looked and tried different things…. but never thought to look at the height/width.

THANK YOU! :)

[Author]

Posts