CSS3 calc(100%-88px) not working in Chrome [duplicate]

by

The problem in the question was caused by the lack of space around the subtraction operator.

Note that the grammar requires spaces around binary ‘+’ and ‘-’
operators. The ‘*’ and ‘/’ operators do not require spaces.

https://www.w3.org/TR/css3-values/#calc-syntax

This article mentions that the spacing is necessary for unambiguous parsing.

Bad: calc(100%-88px)
Good: calc(100% - 88px)

How do I know it is not recognizing it? Because of the strikethrough
and the yellow triangle icon next to the style rule in chrome dev
tools.

A property that is struck through when viewed in Chrome’s developer tools may be valid but overridden; however, a property struck through and with a warning triangle icon next to it is invalid.

2022 Update – calc() is supported by all modern browsers in a wide variety of scenarios, though proper spacing is still required.

More Related Contents:

  1. css transform, jagged edges in chrome
  2. Background color not showing in print preview
  3. Blurry text after using CSS transform: scale(); in Chrome
  4. Bug with transform: scale and overflow: hidden in Chrome
  5. CSS Border radius not trimming image on Webkit
  6. content attribute of img elements
  7. rounded corners on html5 video
  8. CSS3 – How to style the selected text in textareas and inputs in Chrome?
  9. How to keep a flex item from overflowing due to its text? [duplicate]
  10. What is a user agent stylesheet?
  11. Google Fonts are not rendering on Google Chrome
  12. Start an external application from a Google Chrome Extension?
  13. Server terminated early with status 1 error with Selenium for ChromeDriver and Chrome Browser and the log message “Only local connections are allowed”
  14. Chrome Extension: how to capture selected text and send to a web service
  15. HTML5 video will not loop
  16. How can I get the current tab URL for chrome extension?
  17. What does it mean if console.log(4) outputs undefined in Chrome Console?
  18. How to force Chrome browser to reload .css file while debugging in Visual Studio?
  19. Stop CSS transition from firing on page load
  20. Font Awesome icons not showing in Chrome, a MaxCDN related Cross-Origin Resource Sharing policy issue
  21. Chrome: Source of Post Data?
  22. Not able to maximize Chrome Window in headless mode
  23. Chrome does not expand flex parent according to children’s content [duplicate]
  24. Increasing Google Chrome’s max-connections-per-server limit to more than 6
  25. How to disable CSS in Python Selenium using ChromeDriver using ChromeOptions
  26. How does Netflix prevent users from taking screenshots of chrome browser?
  27. Chrome developer tools workspace mappings
  28. Launch IE from a link in Chrome
  29. MP4 not playing on Chrome version 27.0
  30. Creating Google Chrome shortcut with –disable-web-security

Leave a Comment