Hello,
Wondering if I can get some help. My website is fine without pretty url turned on, but when I turn it on, just as the directions say, my homepage is fine and the other pages lose their styling.
without pretty url turned on, all pages are styled correctly.

Even when I replace <link rel="stylesheet" href="<cms:show k_site_link />css/style.css" /> with <link rel="stylesheet" href="http://rexstaffordair.com/css/style.css" />, it doesn't work.
I've even still just tried to use ../ before the link.

I've changed the config file to use the www, I've set the root folder in config, I've followed all the forum help I could find. I've done these one at a time and reversed the process. I'm not sure what's wrong but all the pages besides the homepage still don't get the styling.

My style sheets are in a css folder in my root, but I'm embedding the header.html file (below) and have it in the couch snippits folder.

Here is my header code:

Code: Select all

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<link href='http://fonts.googleapis.com/css?family=Arimo:400,700' rel='stylesheet' type='text/css'>
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="<cms:show k_site_link />js/skel.min.js"></script>
<script src="<cms:show k_site_link />js/skel-panels.min.js"></script>
<script src="<cms:show k_site_link />js/init.js"></script>
<noscript>
    <link rel="stylesheet" href="<cms:show k_site_link />css/skel-noscript.css">
    <link rel="stylesheet" href="<cms:show k_site_link />css/style.css">
    <link rel="stylesheet" href="<cms:show k_site_link />css/style-desktop.css">
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->

I have no idea what could be causing the broken link between the pages and their style sheets now. Is there anyone who can help?

Let me know if there's any other information I can provide.

Thanks,
scratz

[KK]

To troubleshoot the issue please turn on prettyURLs and access one of the page that is displaying the problem.

Do a view-source and note down the URL of the CSS files. Try copy/pasting the URLs directly in the browser address-bar. The CSS files should *not* be accessible. Examine and tweak the URL to see what is wrong with the path.

Hope it helps.

Thank you KK. Yes that was a part of my troubleshooting process. The tags are natively in the 'noscript' tags and it's perfectly fine without the pretty url on. But when I turn P-url on, I must take out the 'noscript' tags for it to work.
when I disable javascript in the pages there are no changes (except the homepage movie now has a play bar).

When I open the console and 'noscript' tags are in place, the link is there but it's just text. When I take out the 'noscript' tags, some styles load and some don't.

I guess I don't understand the link between the two, the use of 'noscript' tags and the pretty urls.

But even though the links are correct when I'm in console, I still can't get all the styling pages to propogate throughout the page.

I did think the problem was solved, but upon further troubleshooting, I found style pages still not loading and I don't understand why. But to clarify, I did check the links as you suggested and the style pages do load using the link as shown in the source code.

I'm pretty baffled as to what's happening.

[KK]

Can you PM me your site's link please?
Keep prettyURLs on for me to see the problem.

[KK]

Thanks for the link.

I had a look and found that your site is built using skelJS (https://github.com/n33/skel).
This framework loads the CSS files dynamically using JS and therefore there are no "<link rel="stylesheet".." declarations in your pages (the one that you mentioned are in noscript tags and are for the situation when JS is disabled and the stylesheets are explicitly loaded).

I don't have any experience with skelJS but browsing lightly on their site I could figure out that it tries to load the CSS files with names matching the 'breakpoints' set in 'js/init.js'.

You are using an older version of skelJS so I cannot be sure but the current versions support specifying a 'href' parameter in the 'breakpoints' as follows -

Code: Select all

breakpoints: {
    'mobile': {
        range: '-480',
        lockViewport: true,
        containers: 'fluid',
        grid: {
            collapse: true,
            gutters: 10
        },
        href: 'mobile.css'
    },
    'desktop': {
        range: '481-',
        containers: 1200,
        href: 'desktop.css'
    },
    '1000px': {
        range: '481-1200',
        containers: 960,
        href: '1000px.css'
    }
}

You can try putting in the absolute paths of the file there.

The base 'style.css', I think, can be specified in the HTML explicitly -

Code: Select all

<link rel="stylesheet" href="http://yoursite.com/css/style.css">

I haven't tested anything but I think this should give you a clue as to what needs to be done.

Hope it helps.

SOLVED:

Thank you again for your amazing insite, KK!!

The problem lay in my init.js file that gets referred to by the skel.js files. That is where the relative link is that i had to make absolute:

Code: Select all

skel.init({
   prefix: 'http://mysite.com/css/style',
   resetCSS: true,
   boxModel: 'border',
   grid: {
      gutters: 50
   },
   breakpoints: {
      'mobile': {
         range: '-480',
         lockViewport: true,
         containers: 'fluid',
         grid: {
            collapse: true,
            gutters: 10
         }
      },
      'desktop': {
         range: '481-',
         containers: 1200
      },
      '1000px': {
         range: '481-1200',
         containers: 960
      }
   }
}

Once I set that one line, everything else snapped into place.

Thanks again for the guidance, KK!

[KK]

You are welcome I'm glad I could help.