CSS calc (percent - pixels) which is interpreted as calc (percent - percent) by the browser
Okay, so it might be a very simple thing that I did (one of those days), but I can't let my life show me that.
Long story short, In my main.scss:
.test{
width: calc(100% - 50px);
}
In my auto-complied main.css (viewed in the code editor and even in the network file manager):
.test{
width: calc(100% - 50px);
}
However, in the browser it does not display correctly and when checked, it was transformed into:
.extra-test{
width: calc(50%);
}
Any ideas on what might be causing this?
(using the latest version of Chrome)
source to share
So I did some more, and the CMS we are using (Concrete5) creates a cached version of the file (which I think is compiled using LESS) and serves instead of the original version of the file.
So, I'll close this question as it appears to be a CMS issue. Thanks for your help and sorry to waste your time!
EDIT: Have resolved this now. For any future Google-eers, the problem was that in Concrete5, I kept the line <?php echo $html->css($view->getStylesheet('main.css'))?>
at the top of my own head-top.php header file. I'm not 100% sure what this line is doing, but changing it to <link rel="stylesheet" type="text/css" href="<?php echo $view->getThemePath()?>/css/main.css">
resolved the problem and served up the correct file, not the cached file, which I believe was compiled by LESS.
source to share