0

I've been venturing into fullstack web dev recently and encountered some strange behaviour on the linux server I'm using to host.

I'm aware that going from windows localhost to a hosted linux server can occasionally lead to problems when importing other files (due to the case sensitivity), but I've never had it affect the functionality of my CSS before.

In short, when I'm on localhost, the login page is meant to look like this (with the form header colour shifting) but changes to this (see login form of hosted page) when hosted. The strange part is that it doesn't affect all the selectors in that same stylesheet, only those with the .class .class2 format (and .modalFormsRGB, for some reason).

As for how I've used the css in the HTML:

<div id="loginForm" class="w3-modal">
<div class="w3-modal-content w3-card-4">
    <header class="w3-container modalFormsRGB w3-center w3-padding-32">
        <span onclick="document.getElementById('loginForm').style.display='none'" class="w3-button w3-xlarge w3-display-topright w3-round-large marginalise">&times</span>
        <h2 class="w3-wide">Login to Your Account</h2>
        <p>New? Register <a href="javascript:undefined" onclick="switchModal()">here</a></p>
    </header>
    <div class="w3-container modalFormsBody">
        <form>
            <p><label><i class="fa fa-user"></i> Username:</label></p>
            <input class="w3-input w3-border" type="text" placeholder="Username">
            <p><label><i class="fa fa-key"></i> Password:</label></p>
            <input class="w3-input w3-border" type="text" placeholder="Password">
            <button class="w3-button w3-block w3-teal w3-padding-16 w3-section w3-large">Login <i class="fa fa-check"></i></button>
        </form>
    </div>
</div>

Any help would be greatly appreciated, I spent the last 4 hours trying to fix this to no avail - I'm sure I'm just fundamentally misunderstanding something with how css is implemented, but a css validator didn't catch anything so I came here!

EDIT: I don't understand... literally 1 minute after posting on here, the css from the hosted page started working, no changes made to the server and I was clearing the cache after each update... It's unnerving that it's fixed without knowing how

John Naughton
  • 3
  • 3
  • I dont see how the Server OS should influence the CSS. The Server doesnt read or compile CSS. CSS is read client sided by the browser not by the server. – tacoshy Apr 11 '21 at 12:31
  • Yeah, the only instances of having it affect the outcome have been when the sheet wasn't imported (i.e. include('Style.css'), actual name us style.css). It's really strange that it had an effect to be honest, no one I know could figure out why it was happening – John Naughton Apr 11 '21 at 12:35

0 Answers0