I finally got it. Turns out you need to shift all the images down so any buttons you don't want to show go below the div. I still don't understand why the div didn't end after the last <li> but it works.
Thanks for everyones' help. -----Original Message----- From: Tindle, Terri Sent: Monday, August 15, 2011 9:45 AM To: css-d@lists.css-discuss.org Subject: RE: [css-d] css sprites It finally clicked for me. Thanks. The last piece of the puzzle is getting the div to stop right below the Check A Charity button instead of showing part of the next button. I played around with the margin-bottom element of the div but that doesn't seem to work. Thanks. -----Original Message----- From: Tom Livingston [mailto:tom...@gmail.com] Sent: Monday, August 15, 2011 9:36 AM To: Tindle, Terri Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] css sprites On Mon, Aug 15, 2011 at 9:06 AM, Tindle, Terri <terri.tin...@ago.mo.gov> wrote: > Hello all. > > Css sprites mystify me. I feel like I understand them in theory but still am > not able to get them to work. Here's the link I'm working with: > > http://ago.mo.gov/index3.php > > I am trying to add a new button below "Consumer Complaints" but I'm not sure > what to put for the y value. The reason I'm so confused is because of the > following code: > > ul#actionButtons li#stops a {background: transparent > url(/images/action_buttons/08112011Sprite.png) no-repeat 0 -700px;} > ul#actionButtons li#reportWater a {background: transparent > url(/images/action_buttons/08112011Sprite.png) no-repeat 0 -620px;} > ul#actionButtons li#mortgageFraud a {background: transparent > url(/images/action_buttons/08112011Sprite.png) no-repeat 0 -80px;} > ul#actionButtons li#consumerComplaint a {background: transparent > url(/images/action_buttons/08112011Sprite.png) no-repeat 0 -310px;} > > Mortgage fraud is between Clean Water and Consumer Complaints but the y value > is greater than both of them. Can someone explain? > > Thanks, > > Terri Tindle > Information Systems Specialist > Office of the Attorney General > Work: (573) 751-1795 > Cell: (573) 659-0347 > terri.tin...@ago.mo.gov<mailto:terri.tin...@ago.mo.gov> > > ______________________________________________________________________ Actually, the order is very different. The button order in the graphic is not like the page, causing confusion. Measure from the top of the image to the top of the desired button in your graphics program. That would be your negative y value. The <a href> should be display: block; and a height defined to match the button height in the graphic. HTH -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
