CSS classes loading into wrong order

[Floren]

Hi guys,

I need to know how css.php is loading the classes, based on which order? Name, id, etc.
I have a strange issue with 2 pages loading the CSS totally different, yet the CSS is identical.

Bad CSS order on https://www.axivo.com/articles/welcome-to-axivo.1/



Good CSS order on https://www.axivo.com/packages/elasticsearch.41/



I'm wondering if you know what causes css.php to load the classes into wrong order. This makes certain elements on the page to be shifted/padded into wrong order:



The goal is not to modify the CSS which is proper, but rather fix the root cause. I'm not troubleshooting the Responsive design, just the regular CSS. Thank you for your help.

 

[Chris D]

What is the exact code in the templates that call the CSS?

It looks to me on one page it could be:

<xen:require css="article_whatever.css" />
<xen:require css="message_simple.css" />

And the other:

<xen:require css="message_simple.css" />
<xen:require css="package_whatever.css" />

And that is my understanding of the order in which it should load the CSS. It should do it based on the order in which it is required in the template. Which seems logical.


Aside from that, yes, as much as your CSS is valid, you might want to introduce some specificity to the selectors to ensure the CSS is overriding correctly, e.g.

.messageSimple.articleUpdate
{
   
}

 

[Floren]

Template article_update (bad):

<xen:require css="message_simple.css" />
<xen:require css="bb_code.css" />
<xen:require css="article_view_header.css" />
<xen:require css="article_update.css" />

<li class="primaryContent messageSimple articleUpdate" id="update-{$update.article_update_id}" data-author="{$article.username}">

    <xen:if is="{$update.title} AND !{$update.isDescriptionUpdate} AND !{$hideUpdateTitle}">
...

Template package_update (good):

<xen:require css="message_simple.css" />
<xen:require css="bb_code.css" />
<xen:require css="package_view_header.css" />
<xen:require css="package_update.css" />

<li class="primaryContent messageSimple packageUpdate" id="update-{$update.package_update_id}" data-author="{$package.username}">

    <xen:if is="{$update.title} AND !{$update.isDescriptionUpdate} AND !{$hideUpdateTitle}">
...

Aside from that, yes, as much as your CSS is valid, you might want to introduce some specificity to the selectors to ensure the CSS is overriding correctly, e.g.

Ya, I thought of that and already fixed everything before implementing the solution. Packages and resources display the CSS code properly, only articles does not. Yet the code is identical on all 3 cases, see below 3 links with identical HTML code.

https://www.axivo.com/articles/new-openssl-vulnerability-discovered.15/ Bad
https://www.axivo.com/packages/elasticsearch.41/ Good
https://www.axivo.com/resources/elasticsearch-setup.11/ Good

 

[Floren]

XenForo_CssOutput is loading the CSS ordered by name.

Good order:

<link rel="stylesheet" href="css.php?css=bb_code,likes_summary,message_simple,moderator_bar,panel_scroller,rating,resource_update,resource_view,resource_view_header,resource_view_tabs

Bad order:

<link rel="stylesheet" href="css.php?css=article_update,article_view,article_view_header,article_view_tabs,bb_code,likes_summary,message_simple,moderator_bar,panel_scroller,rating

I'm wondering if there is a way to solve this issue programmatically. Actually, I'm not even sure that is related...

 

[Chris D]

The best way to solve it is to improve the CSS selectors used.

Regardless of this issue there will be countless times where existing CSS needs to be overridden and the only way to do that is to make your selectors more specific than the ones used by default.

 

[Floren]

@Chris D, for now I fixed the issue adding !important on 2 lines of CSS. Still, I would like to know what causes all this. I posted a new thread into Bugs forums... even if I don't really see it as bug. Hopefully @Mike will shed some light how CSS is processed.

 

[Chris D]

!important isn't a good way either. But glad you have something that works.

I think your earlier conclusion may be correct and it is alphabetical. This is probably just the order by which it is selected from the database.

It would be an interesting exercise to see if renaming your article CSS to something like zarticle solves the problem also.

 

[Floren]

@Chris D, I actually figured an easier fix. resources/articles_update.css template does not have any parent defined classes, that is the problem... so things get tangled. As soon I replaced the first line only with .messageSimple.articleUpdate (instead of .articleUpdate) things got redressed. Using '!important won't help in that specific case because the actual code is a xen:property which will change the CSS behaviour everywhere:

    .articleUpdate .likesSummary
    {
        {xen:property messageLikesSummary}
    }

    .resourceUpdate .likesSummary
    {
        {xen:property messageLikesSummary}
    }

Everything is properly displayed now:
https://www.axivo.com/articles/new-openssl-vulnerability-discovered.15/

 

[Chris D]

That's the kind of thing I've said to do in two posts now, and should be the first thing you do before using !important anyway.

 

[Floren]

Ya, I think this should be done be default in XenForo to avoid confusion... I still think this is a temporary fix and the order of templates does something weird... or else why things would work fine on resources and packages?