XF 1.3 Need some CSS help

[Floren]

Hi everyone,

I've been breaking my head for last 3 hours looking everywhere to see what could cause this issue:



The link with the padding-top issue is:
https://www.axivo.com/articles/welcome-to-axivo.1/

The one that works properly is:
https://www.axivo.com/packages/elasticsearch.41/

The CSS is identical into templates. For some reason, I see loading the .messageSimple .comment, .messageSimple .secondaryContent section. I've been working a lot on this site and it really bothers me to see a little inexplicable thing like that happening. Thank you for helping out.

 

[Russ]

Where you have:

.articleUpdate .likesSummary

You could add another selector such as .Responsive .articleUpdate .likesSummary

Seems to give the correct margin-top: 10px.

 

[Lisa]

In the CSS, try using .packageUpdate .messageSimple .comment, .packageUpdate .messageSimple .secondaryContent (without registering an account and logging in - that's a guess.) and tweaking the padding in there.

 

[Floren]

@Azhria Lilu, I don't understand, on both pages the CSS is identical. For some reason on broken page, the .packageUpdate .likesSummary classes are loading AFTER .messageSimple .comment, .messageSimple .secondaryContent.

 

[Lisa]

@Azhria Lilu, I don't understand, on both pages the CSS is identical. For some reason on broken page, the .packageUpdate .likesSummary classes are loading AFTER .messageSimple .comment, .messageSimple .secondaryContent.

Without registering I can't really see any problem other than a slight difference in the padding on the images you've posted.

 

[Floren]

@Azhria Lilu, that is what I'm trying to solve, I need to understand why the wrong class is loaded first? I guess there is an ID stored into database, in what table the style is stored? I did not have time to delve too much into styling. Something is forcing to load the class into wrong order, no idea what.

Edit: In my screenshot, you can see clearly that the 10px padding is added below the Likes, not above where it should.

 

[Lisa]

As i said, if you put what I wrote above in EXTRA.css, and tweak the padding - that should fix it. I can register an account and double check if you want.

 

[Floren]

@Azhria Lilu, my point is: I should not do anything, the CSS is there and proper. But for some reason is not loading properly, adding anything to EXTRA.css will not solve the original question which is: Why the existing class with right code is not loading properly?

 

[Lisa]

@Azhria Lilu, my point is: I should not do anything, the CSS is there and proper. But for some reason is not loading properly, adding anything to EXTRA.css will not solve the original question which is: Why the existing class with right code is not loading properly?

Packages is an addon? Or is it the RM with a new name. There will be some changes to the CSS somewhere.

 

[Lisa]

I can't see the Edit/Report links in the package one to compare. Check the CSS for .messageSimple .messageMeta for both.

 

[Floren]

Ya, is the RM with the name changed. Articles is the only area that has an issue, Packages and Resources work properly... they all have identical CSS. BTW, thank you for your help.

 

[Floren]

I can't see the Edit/Report links in the package one to compare. Check the CSS for .messageSimple .messageMeta for both.

The report is there:
https://www.axivo.com/packages/autossh.52/



I logged in with an unprivileged user to show test it for you.

 

[Lisa]

heh weird.. it wasn't... now it is. Let me have a dig around

 

[Lisa]

There's your issue.

For https://www.axivo.com/packages/elasticsearch.41/
the CSS is:-

.messageSimple .messageMeta {
    overflow: hidden;
    font-size: 11px;
    line-height: 14px;
    padding-top: 5px;
}

But for https://www.axivo.com/articles/welcome-to-axivo.1/
the CSS does not have the padding-top:-

.messageSimple .messageMeta {
    font-size: 11px;
    line-height: 14px;
}

 

[Floren]

Thank you!

 

[Lisa]

Actually, ignore that. My eyes are looking at the wrong part.

 

[Lisa]

Mouse was jumping around when I was flicking between the pages.

In the .articleUpdate .likesSummary
add !important to margin-top: 10px and see if that fixes it.

 

[Floren]

Actually, ignore that. My eyes are looking at the wrong part.

Tell me about it, I've been trying to fix this for 2 hours.
I found a bug with the large icon not displaying in one tab only, I'll fix once you are done with the lookup... as I need to close the forums so I edit some PHP code.

 

[Floren]

In the .articleUpdate .likesSummary
add !important to margin-top: 10px and see if that fixes it.

I really don't want to do this, I rather fix it properly. Something is breaking the CSS code to load from the database or something... The CSS is there no? It should damn work!

 

[Lisa]

Tell me about it, I've been trying to fix this for 2 hours.
I found a bug with the large icon not displaying in one tab only, I'll fix once you are done with the lookup... as I need to close the forums so I edit some PHP code.

LOL I know how you feel. The longer you look, the less you see