CODEWITHSUNDEEP
jqueryhtmlcssgrailsgsp
ceid-vg
ceid-vg

Reputation: 323

Grails - Internal CSS works, but external fails

At a grails project, adding Internal works but if I copy the code into the external CSS I have, the CSS code I added does not execute. Not that for the entire project, the .css file is correctly loaded and shown, but for the specific lines of code I have enter as Internal CSS, they do not execute if placed in External CSS instead of Internal.

GSP Page: (Internal CSS works as it should)

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'myStylesheet.css')}" type="text/css"/>
    <g:javascript src="employeeFunctions.js"/>
    <g:javascript src="Tablesorter/docs/js/jquery-latest.min.js"/>
    <g:javascript src="Tablesorter/js/jquery.tablesorter.min.js"/>
    <g:javascript src="sortEmployees.js"/>
    <style>
        table.tablesorter th.tablesorter-headerUnSorted {
            background: url('../images/bg.gif') no-repeat center right;
            cursor: pointer;
        }
        table.tablesorter th.tablesorter-headerAsc {
            background: url('../images/asc.gif') no-repeat center right;
        }
        table.tablesorter th.tablesorter-headerDesc {
            background: url('../images/desc.gif') no-repeat center right;
        }
    </style>
</head>

Attempting to pass the style inside the .css file: (External CSS does not execute the lines of code I added)

table.tablesorter th.tablesorter-headerUnSorted {
    background: url('../images/bg.gif') no-repeat center right;
    cursor: pointer;
}
table.tablesorter th.tablesorter-headerAsc {
    background: url('../images/asc.gif') no-repeat center right;
}
table.tablesorter th.tablesorter-headerDesc {
    background: url('../images/desc.gif') no-repeat center right;
}

body {
    // ...........
}

What is interesting is that, at the Internal CSS, I get the following warnings:

Selector tablesorter-headerUnSorted is never used
Selector tablesorter-headerAsc is never used
Selector tablesorter-headerDesc is never used

but even though these warnings appear, the table is correctly sorted!!!

After adding these parts of code at the external css, I get 0 WARNINGS and the external css seems to understand these selectors but they are not executed while I have these lines at external and not in internal css!!!

With Inline CSS

enter image description here

With External CSS

enter image description here

Upvotes: 0

Views: 115

Answers (1)

hallywang
hallywang

Reputation: 146

background: url('../images/bg.gif')

check the file "bg.gif". Is it at the correct location?

example

Upvotes: 3

Related Questions