Why is CSS class sometimes loading and sometimes not loading!

Hello,

For example, we have a CSS class called:
see_through
which is in our main CSS file: style_new.css

Now when we want to use this CSS class in this page:
https://www.anoox.com/anoox_explore_test.php
it is NOT loading!

However, when we include this CSS class in this same page directly, this CSS class is loading, here:
https://www.anoox.com/anoox_explore.php

What is going on!
Why does this CSS class not load when it is references from the CSS file but it will load when it is in page directly?

Just to be clear, this CSS class from the CSS file does load OK in some other pages!

Regards,

I don’t see any difference in the pages you link.
It is possible that on some pages the styling in the <style> tags could override that in the css file since they come after the link.

2 Likes

It seems to be loading ok.

Firebug shows the class in action here:

.see_back {
    font-size: 24px;
    color: white;
    font-weight: bold;
    border: 2px solid #FFFFFF;
    padding: 10px;
    margin-top: 25px;
    width: 75%;
}
.see_through {
    background: rgb(170, 187, 97);
    background: rgba(170, 187, 97, 0.5);
}
<div class="see_through see_back">
   Do  you share in our Core principals?
</div>

The element has the green transparent background.

2 Likes

What!
Ok, it is Chrome that is not loading the see through class in:
https://www.anoox.com/anoox_explore_test.php

However, FF & IE load the see_through class from the file OK!
What the Hek is up with Chrome?

And to think we spent all this time to fix this and this is a Bug in Chrome :frowning:

FYI, we did hit the Reload button on Chrome. Many time. But still it will not load the see_through class from the file OK!

Any ideas?

I’m not seeing a problem in Chromium, but you could start by validating your code. Links to style sheets in the middle of the page body are not valid and (I imagine) doomed to failure.

1 Like

Chrome is showing the rule exactly as shown in my other post.

Maybe you have cache issues or we are looking at different things?

A screenshot of that element may help us to see what you are seeing.

5 Likes

Paul,

Now Chrome is loading the CSS element Ok from the CSS file! What!
So it was not loading it OK even after hitting re0load. Many times. And this happens now and then, that is a page is not loading a CSS element Ok from the CSS file! Even after Refreshing & Reloading the page. Have you all run into this also?
And what suggestion you have?

Thanks,

Again, I would start by validating the code and ensuring that the styling information is included in the correct part of the document.

Sometimes a refresh will only reload the html, but the css is still cached. Clearing the cache can help. That would explain why no one else saw the problem.

2 Likes

Ok. Thanks.

@SamA74’s suggestion does not negate @TechnoBear’s repeated rock solid recommendation.

3 Likes

Just noticed this:


<div class="see_through see_back">
   Do  you share in our Core principals?
</div>

Are we allowed to use two classes for the same element?

Yes, you can have more than one class for the same element.

1 Like

Hey there

You are using class “see_through” in two pages “style_new.css” and “anoox_explore_test.php”
So the first preference goes to “anoox_explore_test.php”

if you want use CSS attribute from “style_new.css”, you must give importance
Ex: see example below
.see_through {
background: rgb(170, 187, 97) important;
background: rgba(170, 187, 97, 0.5) !important;
}

Thanks Taba

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.