0

Changes made to CSS file do not get applied on 404 error page

EDIT: page in question: https://hinnahackers.no/404/

Right of the bat: This is not a relative path issue. I am specifying a base href in my header like so:

<base href="https://hinnahackers.no/">

I know that this works, because my 404 page loads SOME of the styles in my CSS file, but not newly added classes.

It's also not a force refresh CSS file issue, because I am already doing styles.css?v=X:

<link href="css/styles.css?v=749" rel="stylesheet" type="text/css" />

But it doesn't seem to work on my 404 page. The CSS updates on other pages though, like index.php.

This is my .htaccess file that I use to redirect users to 404.php if they enter an invalid url:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^/]+)/$ $1.php
RewriteRule ^([^/]+)/([^/]+)/$ /$1/$2.php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$
RewriteRule (.*)$ /$1/ [R=301,L]

#Rewrite everything to https
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

#404 redirect
ErrorDocument 404 /404.php

In my CSS I added the following classes:

.404__heading {
    font-size: 2em;
    color: #fff;
    line-height: 1.5;
}

.404__error {
    margin-top: 50px;
    font-size: 2em;
    color: #ea0548;
    line-height: 1.5;
}

.404__entry__container {
    margin-top: 50px;
}

.404__entry__wrap {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 21px;
    vertical-align: middle;
    margin-right: 12px;
}

.404__entry__wrap a {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    font-size: 2em;
    text-decoration: none;
}

.404__entry__top__dot {
    position: absolute;
    top: 0;
    left: 0;
    background: #ff6600;
    height: 7px;
    width: 7px;
}

.404__entry__middle__dot {
    position: absolute;
    top: 10px;
    left: 7px;
    background: #ff6600;
    height: 6px;
    width: 7px;
    transform: translateY(-50%);
}

.404__entry__bottom__dot {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #ff6600;
    height: 7px;
    width: 7px;
}

.404__entry__caret {
    display: inline-block;
    vertical-align: middle;
    background: #fff;
    height: 35px;
    width: 18px;
    margin-bottom: -5px;
}

.404__heading::selection,
.404__error::selection,
.404__entry__wrap::selection,
.404__entry__wrap a::selection {
    text-shadow: none;
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

But they don't get recognised on my 404.php page. So right now I have added styling etc. directly in my 404 page. I am completely at loss at what is going on. I have been googling for hours, but can't find a solution.

2 Answers 2

1

CSS classes can't start with a digit.

Sign up to request clarification or add additional context in comments.

1 Comment

There we have it! Wow do I feel slow right now. Thank you man, saved my day <3
0

You seem to have CSS errors. When you check your CSS of the style.css file using this tool: http://csslint.net/ You will see 34 errors. Perhaps that is what is causing your issue?

1 Comment

Thank you MistaPrime! You were absolutely right, there was an error in my CSS, as Samwise pointed out.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.