Why doesn't the CSS calc() function work for me?

Question

I learned about the CSS function calc() and its awesome. I tried to use it like:

#abc{width:calc(100%-20px)}

But the problem with this function is that it doesn't work. I tested this code IE9 and Safari and it didn't work.

Why doesn't it work?

Answer 1

The operator “-” must be surrounded by spaces:

#abc{width:calc(100% - 20px)}

Quoting MDN info on calc(): “Note: The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length.”

The formal statement on this is in clause 8.1.1 of the CSS Values and Units Module Level 3 CR.