Search code examples
phpcsswebconcrete5

CSS calc(percent - pixels) being interpreted as calc(percent - percent) by browser

Okay, so this could be a really simple thing that I've done (one of those days) but I cannot for the life of me figure this one out.

Long story short, In my main.scss:

.test{
    width: calc(100% - 50px);
}

In my auto-complied main.css (viewed in code editor and even online file manager):

.test{
    width: calc(100% - 50px);
}

Yet, in the browser it isn't displaying correct and on inspection, it has somewhere been converted to:

.extra-test{
    width: calc(50%);
}

Any ideas on what could be causing this?

(Using latest version of Chrome)

Solution

  • Okay so I've done some more digging and the CMS we are using (Concrete5) is creating a cached version of the file (that I think is compiled using LESS) and serving that instead of the original version of the file.

    So I will close this question as this seems to be an issue with the CMS. Thanks for your assistance and sorry for wasting your time!

    EDIT: Have resolved this now. For any future Google-eers, the issue was that in Concrete5, I had kept the line <?php echo $html->css($view->getStylesheet('main.css'))?> at the top of my custom theme's header-top.php file. I'm not 100% sure what that line does but changing it to <link rel="stylesheet" type="text/css" href="<?php echo $view->getThemePath()?>/css/main.css"> resolved the problem and served the correct file, rather than a cached file that I assume was LESS-compiled.