I'm trying to achieve something I'm not even too sure is possible here.
I'm trying to place a particular drop shadow PNG image under the nav for my site. However I also want to reuse this ability for any object I wish on the site, be it an image, a div or button. Basically use the same shadow image for any object.
Using the css3 calc() function I'm attempting to do height of the object @ 100% + 25px (height of png).
I have tried styling:
height: -webkit-calc(100% + 25px);
height: -moz-calc(100% + 25px);
height: -o-calc(100% + 25px);
But from what I can gather in Firebug 100% + 25px is then the new 100% as this achieves nothing.
I also tried:
height: -webkit-calc(100% + 25px);
height: -moz-calc(100% + 25px);
height: -o-calc(100% + 25px);
background-position: 0 -moz-calc(100% + 25px);
But no joy here either.
If I use calc(3em + 25px); it works no problem, but this isn't flexible enough to work on any object.
Is this even possible? Am I even making sense?!
Answer
I'm not 100% sure but the working draft describes that the operators on both sides of a calculation form a sub expression (of a single type).
Since you're combining a relative value (%) with a absolute value (px) it might not be able to complete the calculations.
Update: I did a small test and it seems too work fine. Are you sure your selectors and positions in the html are correct? Check this Fiddle.