Why does the Internal style sheet works and External style sheet don't?

Question

I am helping to create a website, we are two people working on this project. The other person is responsible for the visual part (CSS, html and javascript), I'm responsible for the internal functioning of the website (php, javascript and database, ...).

I created a code for the site pop up error messages.

I used some css to create the pop up mensage and i't work when I use the internal style sheet.

The problem it's when I use external style sheet, the pop up effect it's not working.

I did some research and find that this could be caused by encoding the css.

So to solve this problem I'm doing this:

In my mystyle.css:

 @charset "utf-8";

In my head.php:

<meta charset="utf-8">

But this did not solve my problem.

I did some more research and there is the possibility of being caused by fetching the external css in the wrong place.

I think it's not caused by this because the other person's css are working. I'm saving my css in the same folder as the other person is saving hers. I call the css files the same as the other person.

My head.php:

<link rel="stylesheet" href="<?php echo $base_url;?>/css/bootstrap.css"> 
<link rel="stylesheet" href="<?php echo $base_url;?>/css/mystyle.css">

What could be causing this, or am I doing something wrong?

My full code for external style sheet.

mystyle.css:

@charset "utf-8";

        .modal-error-box {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding: 200px 0px 100px 0px;
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }


        /* The Close Button */
        .close{
            color: black;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        .modal-error-box-header{
            margin: auto;
            width: 35%;
            height: 5%;
            border: 3px solid black;
            background-color: Red;
            color: Black;
        }

        .modal-error-box-body 
        {
            margin: auto;
            width: 35%;
            height: 20%;
            border: 3px solid black;
            text-align: center;
            background-color: white;
            color: Black;
            overflow: scroll;
        }

html:

<div id="erro-gravar-operacoes" class = "modal-error-box">
        <div id ="error-gravar-header1" class = "modal-error-box-header">
            Mensagem de ERRO:
            <span id="close-erro1" class="close">&times;</span>
        </div>
        <div id = "erro-gravar-body1" class="modal-error-box-body">
        </div>
</div> 

javascript:

function validatesubmitform(id_var)
{

    //validate form.

    if(validate == false){

                    var div_error = document.createElement("p");
                    div_error.setAttribute('id', "id_element_erro" );
                    if(text_erro!="")
                    {
                        var element_erro = document.createElement("p"); 
                        element_erro.setAttribute('id', "id_element_erro1" );
                        var texto_erro = document.createTextNode(text_erro);
                        element_erro.appendChild(texto_erro);
                        div_error.appendChild(element_erro);

                    }
                    if(text_erro1!="")
                    {
                        var element_erro1 = document.createElement("p");
                        element_erro1.setAttribute('id', "id_element_erro2" );
                        var texto_erro1 = document.createTextNode(text_erro1);
                        element_erro1.appendChild(texto_erro1);
                        div_error.appendChild(element_erro1);
                    }
                    var div_display = document.getElementById("erro-altera-body2");
                    div_display.appendChild(div_error);
                    document.getElementById("erro-altera-operacoes").style.display='block';    
        }
        return validate;

}

Help with this problem is really necessary, and greatly appreciated.

Thanks in advance for future contributions to solving this problem.

Answer 1

One way to do this is by giving yourself write permission in the css folder

Ubuntu: sudo chown -R username /.../.../.../.../css

If everything seems to be fine and some files don't load, check the file permissions.