Stephanie Leary wrote: > Ran into a bizarre problem over the weekend. The goal of this page is to > combine a nav menu with progress meters for a funding campaign. After much > fiddling with stacking things, I realized the simplest way to do it would be > to set a background image on each list item, and move it to the left by > whatever amount has not been funded. > > Example: > http://stephanieleary.net/progress-test/ > > For goal #10, I tried > background-position: -76% 50%; > > ...but it doesn't work. If I do the math and specify the pixels, it does: > background-position: -152px 50%; > > (Actually, that doesn't work in Safari either, but I'm willing to deal with > Safari later.) > > Why won't the percentage work? > >
Image and box are approx. 200px wide in your example. As per CSS spec, the percentage does not move the left top corner: "With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area." This means, percentage bg positioning uses two corresponding points, a point in the img and a point in the box, and matches them. See fig1 in Zoe's article [1]. As long as your image is as wide as the box, no percentage value should move it, since the position of any percentage-related point is the same. If both are 200px wide, 50% means: the middle of the img is matched to the middle of the box: no move. 0%: no move. -76%: no move. Because both are equal in width. With percentages, you can move a smaller or an wider image in relation to the box. To cover 100% of the box with the image: The image should have a width of 400px, and the half of it should get the color [+], the other half should be white [=]. img: 0%++++====100% 400px box: 0%####100% 200px turned by -90° here imgpos:0%, boxcovered:100% = = = = +# +# +# +#_0% pos 25%, covered 75% = = = =# +# +#_25% +# + pos 50%, covered 50% = = =# =#_50% +# +# + + pos 75%, covered 25% = =#_75% =# =# +# + + + Or is it the other way round? Hmm. And Safari will probably have problems with %-positioning bg-images that are bigger than the box anyway. Ingo [1] http://www.communitymx.com/content/article.cfm?page=1&cid=AFC58 -- http://www.satzansatz.de/css.html -- http://www.satzansatz.de/css.html ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
