CODEWITHSUNDEEP
css
kaizenCoder
kaizenCoder

Reputation: 2229

.loading css doesn't work from external stylesheet

I have a .loading css class defined, which only appears to work if I add it to the the page as internal css. It fails to generate the loading circle when I move it to my external style.css file.

Here's what I do know:

  1. style.css is being loaded because the page is styled and I have also double checked via firebug.

  2. I have tried adding .loading to a .css file of its own and loaded it and it still fails.

  3. I don't have another .loading class defined in my style.css file
  4. I have tried renaming .loading to .loadingCircle with no change (did this incase it conflicts with JQuery)

My header files:

<link href="css/style.css" rel="stylesheet" type="text/css">
<script type='text/javascript' src='includes/js/jquery.js'></script>
<link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="includes/js/jquery-ui-1.8.21.custom.min.js"></script>
<script type='text/javascript' src='includes/js/createDialog.js'></script>
<script type="text/javascript" src="includes/js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="includes/js/jquery.tablesorter.pager.js"></script>
<script type='text/javascript' src='includes/js/script.js'></script>

Upvotes: 0

Views: 896

Answers (2)

kaizenCoder
kaizenCoder

Reputation: 2229

Thanks all. While having another look at my css I discovered that it was an issue with the path to the loading image. I guess had I added it someone would have spotted it for me

My folder structure was such that:

 /css
 /images
 searchForm.php
 index.php
 edit.php

My .loading css inside searchForm.php had:

.loading {
       background:url('images/ajax-loader_thick.gif') no-repeat center center;

I missed doing this when I added it to my style.css file inside the css folder:

.loading {
       background:url('../images/ajax-loader_thick.gif') no-repeat center center;

Upvotes: 0

philwills
philwills

Reputation: 995

Move your css file after the jqueryui css import. Last one wins if they have the same specificity...

Upvotes: 1

Related Questions