At 3:09 AM -0500 9/6/07, Rafael wrote: >Nick Fitzsimons wrote: >> >> Although "top 5%" is invalid, that's only because the horizontal position >> must come first if one of the values is not a keyword; so "5% top" or "left >> 23px" are valid. However, for clarity, I tend to use either just keywords or >> just units, rather than mixing them together: "0 23px", for example. > > It seems it was invalid before, but not anymore(?).
Actually, Nick's right and the horizontal value has to come first whenever you use lengths or percentages-- though understanding that requires a detailed breakdown of the CSS 2.1 value syntax for 'background-position', which is a good deal more complicated than the CSS2 syntax. Here's what the latest version of the specification says (see <http://www.w3.org/TR/2007/CR-CSS21-20070719/colors.html#propdef-background-position>): Value: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit Oy. So I cleaned it up a bit to read: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit Hopefully that makes it a bit clearer that we have three possible forms for the value to take, and have to choose between them. The last form is simply 'inherit', which is simple enough. The first form is this: [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? The first line says "you can use a percentage, a length, or any of the three listed keywords". Again, you have to choose one of those. Then, the second line says "you can OPTIONALLY (that's what the appended '?' means) have a percentage, a length, or any of the three listed keywords". The key part here is that because there's no symbol between these two lines, the value parts have to be in that order. In other words, in this form, you can't put the vertical value first, no matter what. The horizontal has to come first. And in the description of this value form, the spec says that if you omit the vertical part of the value-- remember, it's optional-- then it's "assumed to be 'center'". Remember, though, that's just one of the two non-'inherit' value forms we're permitted. The second form is: [ left | center | right ] || [ top | center | bottom ] In this form, you can choose one keyword from each list of three, plus you can put the two words in any order AND you only have to pick one of the two (all that is what the '||' between the lines means). So you can validly say '5% top', but not 'top 5%'. For that matter, you can say '0 top' but not 'top 0', even though the functionally equivalent 'top left' is perfectly fine. Bonus fun fact: as with an omitted vertical value in the first value form discussed, if you only use one keyword in the second form, the missing one is assumed to be 'center'. So 'top' is equivalent to 'top center' (and 'center top'), and 'left' is equivalent to 'left center' (and 'center left'). -- Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone "CSS is much too interesting and elegant to be not taken seriously." -- Martina Kosloff (http://mako4css.com/) ______________________________________________________________________ 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/