Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • niklasalbin Friend
    #1027739

    Some time ago, I think, the less compiler started treating statements like this differently:

    img[style*="float: right"], 
    img[style*="float:right"] {
      width: 100%
    }

    rather than compiling it like this (like http://less2css.org/ does):

    img[style*="float: right"],
    img[style*="float:right"] {
      width: 100%;
    }

    it compiles it like this:

    img[style*="float:right"],
    img[style*="float:right"] {
      width: 100%;
    }
    

    The result is that an image like this:

    <img style="float: right">
    

    is not matched by the rule.

    Now, I’m pretty sure this didn’t used to happen but has started happening in some update. It’s rather annoying, as jce floats images with a blank space after the colon.

    Is there a work around?

    Niklas

    Pankaj Sharma Moderator
    #1027855

    Hi
    Can you share the URL of page on which you are facing the problem with screenshot,
    So that i can check it on your site.

    Regards

    niklasalbin Friend
    #1027879

    Hi,

    I just realised that it isn’t the less compiler but the optimizer that does it, which makes more sense. Obviously sensible for the optimizer to remove extra blank spaces but in this case it breaks the stylesheet.

    I’m using purity_iii if that matters.

    Here’s an example: https://www.marxist.com/liberdade-e-luta-the-development-of-a-revolutionary-mood-in-brazil.htm Presently, the optimization is on.

    This is the code to which the float: right should apply:

    <span style="float: right; display: block; max-width: 536px; width: 100%;" class="wf_caption"><img src="/images/stories/brazil/liberdade-e-luta-interview.jpg" alt="liberdade e luta interview" style="float: right; width: 100%; margin: auto;" width="536"><span style="display: block;">Activists from Liberdade e Luta</span></span>

    Here’s the generated css (after optimization):

    article img[align=right],.article-intro img[align=right],article img[style*="float:right"],.article-intro img[style*="float:right"],article img[style*="float:right"],.article-intro img[style*="float:right"],article span.wf_caption[style*="float:right"],.article-intro span.wf_caption[style*="float:right"],article span.wf_caption[style*="float:right"],.article-intro span.wf_caption[style*="float:right"],article .img-fulltext-right,.article-intro .img-fulltext-right,article .img_caption.right,.article-intro .img_caption.right,article .img-intro-right,.article-intro .img-intro-right,article .pull-right.item-image,.article-intro .pull-right.item-image{margin-left:28px;margin-bottom:14px}

    Here’s the same css part with optimization switched off:

    article 
    img[align=right],
    .article-intro img[align=right],
    article img[style*="float: right"],
    .article-intro img[style*="float: right"],
    article img[style*="float:right"],
    .article-intro img[style*="float:right"],
    article span.wf_caption[style*="float:right"],
    .article-intro span.wf_caption[style*="float:right"],
    article span.wf_caption[style*="float: right"],
    .article-intro span.wf_caption[style*="float: right"],
    article .img-fulltext-right,
    .article-intro .img-fulltext-right,
    article .img_caption.right,
    .article-intro .img_caption.right,
    article .img-intro-right,
    .article-intro .img-intro-right,
    article .pull-right.item-image,
    .article-intro .pull-right.item-image {
      margin-left: 28px;
      margin-bottom: 14px;
    }

    Here’s an extract of the relevant less code:

    article,
    .article-intro {
    // ...
      img[align=right],
      img[style*="float: right"],
      img[style*="float:right"],
      span.wf_caption[style*="float:right"],
      span.wf_caption[style*="float: right"],
      .img-fulltext-right,
      .img_caption.right,
      .img-intro-right,
      .pull-right.item-image {
        margin-left: @t3-global-margin;
        margin-bottom: @t3-global-margin / 2;
        //added for purity 1.1.6
    //    max-width: 100%;
    
        @media screen and (max-width: @screen-sm-max) {
          margin: 0;
        }
      }
    //...
    }

    Niklas

    Pankaj Sharma Moderator
    #1027883

    Hi
    The code is overriding by the theme css file. See this: http://prntscr.com/eyzst5
    The width is 100% but it is overridden by inherit code, you can replace the inherit with 100% or comment this code.

    Regards

    niklasalbin Friend
    #1027926

    Hi,

    The screenshot is with the optimizer turned off (note file name template.css). You must have looked at it as I was turning it off and on.

    When optimizer is turned on, the blank spaces in the code are removed (note how the blank space between float and right gets removed).

    A bit of discussion on this:
    http://stackoverflow.com/questions/3713716/css-select-images-with-style-floatleft-possible
    Note both answers mention the difference between img[style="float:left"] and img[style="float: left"]

    Niklas

    Pankaj Sharma Moderator
    #1027941

    Hi,
    To be frank I am not able to understand what exactly you want to achieve.
    You can post a screenshot if issue and illustrate the issue in it. So that i can check your request.

    Regards

    niklasalbin Friend
    #1027981

    Hi,

    Sorry for not making myself clear. I originally thought the problem was with less compiler but I now realized it’s the css compression (minify) that does it.

    See the difference in these two images. One with optimize css on, one with off.

    The difference in the css that is generated is as I explained above. The blank space in the style attribute css selector is removed:

    article span.wf_caption[style*="float: right"],
    article span.wf_caption[style*="float:right"],

    and turned into

    article span.wf_caption[style*="float:right"],
    article span.wf_caption[style*="float:right"],

    meaning, it will not match

    <article><span class="wf_caption" style="float: right"></span></article>

    but only match

    <article><span class="wf_caption" style="float:right"></span></article>

    Is that clearer?

    It’s a problem where the css optimizer removes what it perceives as unnecessary blank spaces, which are actually needed.

    Niklas


    1. compression_on
    2. compression_off
    Pankaj Sharma Moderator
    #1028343

    Hi
    Kindly use max-width:100!important for the image style and it will not override by the other style.
    Still, the issue is not clear to me, because the screenshot only shows the css is overridden by another css.
    On compression, this can happen when css files are merged in one file.

    Regards

    niklasalbin Friend
    #1028453

    Hi,

    Just ignore the screenshots then… The css is a bit complicated and too long to make the point well. It makes it hard to explain.

    Just to reiterate, the css code after less processing is perfectly fine, but when I switch on the css optimizer built into t3-framework or the purity iii template, the optimizer removes the extra blank space in the code where it says "float: right" and makes it "float:right" and it ruins the css code.

    Here’s an idea of what I want to achieve:
    https://jsfiddle.net/ut9koyd0/

    Can you see the difference between the two images? The only difference in the code is the blank space here:

    <span class="wf_caption" style="float:right">...</span>
    <!-- vs here -->
    <span class="wf_caption" style="float: right">...</span>

    Niklas

    Pankaj Sharma Moderator
    #1028458

    Hi
    Kindly share the URL on site on which you have the issue
    It seems you are trying to do something in the style that does not belong to template.
    Because the page you shared looks fine in style and there is no issue.

    Regards

    niklasalbin Friend
    #1028467

    Hi,

    It looks fine now, because I turned off the optimizer.

    I’m trying to help you with a minor flow in the optimizer. If you’re not bothered to fix it, that’s fine with me. I switched to jch_optimizer now anyway which doesn’t cause the same problems.

    Niklas

    Pankaj Sharma Moderator
    #1028471

    You can turn on the optimization again and share URL of site with screenshot.
    .

Viewing 12 posts - 1 through 12 (of 12 total)

This topic contains 11 replies, has 2 voices, and was last updated by  Pankaj Sharma 6 years, 11 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum