CSS Works fine on Localhost but not on Server

Question

I am facing a strange problem.

I have developed a website in ASP.NET

My Problem is :

Website is working fine on local server and all pages working fine. Then I have uploaded my files to GoDaddy hosting account. Homepage is working fine but other pages' CSS isn't applying. All CSS are given through the master file but still its working on Homepage but not on other pages.

I have cross-checked with hotsing providers for Folder/File permissions and they are all fine. And there isn't any other problem with hosting side.

What could be the possible issue?

The site is : Website

I checked above link and I can see that css are loaded. Is the issue still exist? — Jerad Rutnam, Jun 21 '16 at 09:32
Yes. Css are working fine on homepage. Visit ajeykamat.com/Abroad_Mbbs for example. — Mahadev, Jun 21 '16 at 09:33
i think you are missing few .css file because when i search .css in `view-source:http://ajeykamat.com/Abroad_Mbbs` there are only 4 .css files while in `view-source:http://ajeykamat.com/` there are 22 .css file so your are missing some css stuff. — dr. strange, Jun 21 '16 at 10:02

Jerad Rutnam · Accepted Answer · 2016-06-21T09:47:04.810

1

Noticed that you have called bootstrap.css using a default page (e.g. Default.aspx) in the home page. where it is not available in the inner pages. Ideally these common files should call from the Master Page (Layout Template) instead content pages.

Basically links, meta tags etc ... should be in the head tag. Having those are in body tag is not a good practice.

Compare the source code:

view-source:http://ajeykamat.com/Abroad_Mbbs
view-source:http://ajeykamat.com/

There you can see that bootstrap.css is missing in 'Abroad_Mbbs'

edited Jun 21 '16 at 09:47

answered Jun 21 '16 at 09:43

Jerad Rutnam

1,536
1
14
29

Thanks for the suggestion. I'll change it. But is there any influence of this on my posted problem ? – Mahadev Jun 21 '16 at 09:45
Yes it is, I noticed that css styling are missing on the inner pages. – Jerad Rutnam Jun 21 '16 at 09:48
Thank you very much. This worked like a charm for me. But how this was running fine on local server ? Explanation will definitely teach me something – Mahadev Jun 21 '16 at 09:55
Glad it helped! :) It could be something to do with caching with the home page loaded bootstrap.css. But without checking difficult to tell what was it exactly. – Jerad Rutnam Jun 21 '16 at 09:58

score 0 · Answer 2 · answered Jun 21 '16 at 09:31

0

You're probably using a relative path to the css instead of an absolute one

answered Jun 21 '16 at 09:31

Borgtex

3,235
1
19
28

Ok. Can you elaborate more please ? – Mahadev Jun 21 '16 at 09:32
i.e. relative path= 'css/styles.css', absolute path = '/css/styles.css'. Both urls would work in the home page, but as soon as you go to a section, i.e. mywebsite/info, the first path will look for the css file in mywebsite/info/css/styles.css, and it would not work. – Borgtex Jun 21 '16 at 09:41
Thanks. I'll check for this. But this bhaviour should be applicable for all pages. In here, CSS working fine for home page but not others. And CSS is linked in Master page which is common to all pages. – Mahadev Jun 21 '16 at 09:45

score 0 · Answer 3 · edited May 23 '17 at 12:33

The order of the css and js files are wrong.

At present, the order is as below at: http://ajeykamat.com/Abroad_Mbbs

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Content/menu/styles.CSS">
       <script async="" src="//www.google-analytics.com/analytics.js"></script>
       <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
        // analytics code
    </script>
       <script src="Content/menu/script.js"></script>
        <title>
        Abroad_Mbbs - Ajey Kamat : MBBS in Russia | MBBS in Kyrgyzstan | MBBS in Ukraine | MBBS in Philippines | MBBS in Poland | MBBS in Bangladesh
    </title>
    <script src="/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>
    <link href="/Content/css?v=wFlI7GPr8DB0VuPXheNHY8X5NoDOTpjcfLo3B5h4Yzk1" rel="stylesheet">
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">

It should be as below:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<script async="" src="//www.google-analytics.com/analytics.js"></script>
<title>Abroad_Mbbs - Ajey Kamat : MBBS in Russia | MBBS in Kyrgyzstan | MBBS in Ukraine | MBBS in Philippines | MBBS in Poland | MBBS in Bangladesh
</title>
<script src="/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>
<link href="/Content/css?v=wFlI7GPr8DB0VuPXheNHY8X5NoDOTpjcfLo3B5h4Yzk1" rel="stylesheet">
<link rel="stylesheet" href="Content/menu/styles.CSS">
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      <script src="Content/menu/script.js"></script>
    <script>
        // analytics code
</script>

Note that the CSS and Javascript should needed to be loaded one after another. Priority matters here.

Also, please make sure to use absolute path instead of relative ones. using relative paths causes 404 error, if you're using url rewrite. More details about it at: Difference between Relative path and absolute path in javascript

Ohh, I didn't know that. Thank you. I'll check this and correct the order and post results here. — Mahadev, Jun 21 '16 at 09:46
Also, please make sure to bundle properly. if there is an @import statement in css file, asp.net bundling will fail. — Ravimallya, Jun 21 '16 at 09:47

CSS Works fine on Localhost but not on Server

3 Answers3