CSS Calc Invalid Property Value

css calc invalid property value

You can't divide by units like px, only numbers.

How to overcome CSS calc() function invalid property value, but when typed in inspector same code does work?

The first one doesn't look like the minus - symbol. It's a bit wider. It's actually an en dash symbol not a minus symbol. Check here -> https://www.babelstone.co.uk/Unicode/whatisit.html and copy/paste the symbol you use and then write the minus - symbol.

They have different unicodes.
This – ( the one you use ) is an EN DASH ( you can make it with ALT + 0150 ) and this - is a HYPHEN-MINUS {hyphen or minus sign}.

I guess you copy/pasted the code from somewhere and you accidentally inserted an en dash instead of the minus.

should be calc(100% - 169px) iso calc(100% – 169px) you can see there's a slight difference in the width of the symbol

See example below

div {  height:50px;  background: red;  margin: 10px 0;}div.first {  /* EN DASH */  width : calc(100% – 169px);}
div.second {  /* minus */  width : calc(100% - 169px);}

<div class="first">  Not working ( EN DASH )</div><div class="second">  Working ( minus )</div>

Invalid property value error for calc() function

The values inside calc() must be seperated by a space.

height: "calc(100vh - 4rem)"

Firefox: calc() invalid property value

This is a known issue. Firefox does not currently support calc() values on properties that accept either lengths or numbers, of which line-height is one such property. See bug 594933.

Since 3rem / 2 is exactly 1.5rem you can just hardcode that amount instead as a workaround.

Invalid property value with HTML / SASS element

Two issues, you can't nest calc and you can only have one unit declaration.

You need something like

$iconDivSize: 200;
.iconDiv {    
    .icon {        
        height: calc(#{$iconDivSize}px / 60.8 * #{$iconDivSize});
    }
}

Demo

Calc for responsive text is an invalid property

If I recall correctly, the CSS's calc() division must have a <number> on the right side. For that reason unit based values cannot be used in division like this.

MDN has great documentation on this.

---

Related Topics