CSS functioning properly on Localhost, but encountering issues on the Server

I am encountering an unusual issue.

After developing a website using ASP.NET

The problem I am facing is :

While the website works perfectly on my local server and all pages display correctly, once I uploaded the files to my GoDaddy hosting account, the homepage works fine but the other pages do not have the CSS applied. Even though all CSS styles are provided through the master file, they seem to work on the homepage but not on the other pages.

I have verified with the hosting provider regarding Folder/File permissions, and everything seems to be in order. There doesn't appear to be any issue on the hosting side.

What could possibly be causing this problem?

The website in question is : Website

Answer №1

Upon reviewing your website, I noticed that you are calling bootstrap.css on the home page (e.g., Default.aspx) but not on the inner pages. It is best practice to include common files like this in the Master Page (Layout Template) rather than in individual content pages.

It is important to place links, meta tags, etc., in the head tag of your HTML document. Putting them in the body tag is not recommended.

To see the difference in source code, you can compare the following pages:

View source:
View source:

You will notice that bootstrap.css is missing on the 'Abroad_Mbbs' page.

Answer №2

Instead of an absolute path, consider using a relative path for the css file

Answer №3

The order of the css and js files needs to be corrected.

Currently, the order is incorrect on the website:

<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">

The correct order should be:

<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>

It is important to load CSS and JavaScript files in the correct order, with priority in mind.

Additionally, make sure to use absolute paths instead of relative ones to avoid 404 errors when using url rewrite. For more information, refer to: Difference between Relative path and absolute path in javascript

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating a splash of color while changing the background color on scroll

Is it possible to include more colors between the "beginning-color" and the "ending-color" in this code that changes the background color on scroll? example $(document).ready(function(){ var scroll_pos = 0; var animation_begin_pos = 0; ...

What is the most effective method for the server to communicate with a web client through message delivery?

If you have any links to articles related to this topic, please share them as I may not know the exact terminology to search for. I am interested in understanding how a web application can facilitate server-to-client communications. The internet was not o ...

Implementing uniform 1px borders across Bootstrap columns

Is there a way to achieve a consistent 1px border around columns using only CSS, without creating a 2px border when two columns are side by side? I want the outer edges to have a 1px border while the inner borders have a double width due to being adjacent. ...

The "else" statement is never being executed

Trying to create a form where users enter their first name, last name, and city. If any input is empty or contains numbers, a message should appear requesting to fill out all boxes without numbers. Otherwise, display a personalized quote using the input in ...

Having trouble with submitting the code - need help resolving the issue

I'm facing an issue with my submit cancel code. The JavaScript code I implemented for preventing the submission function on my page isn't working as expected. While it does work to a certain extent, it's not fully functional. I am seeking a ...

The calendar on the Datetimepicker is not appearing in the proper position

I have encountered an issue while using Eonasdan bootstrap datetimepicker in a paramquery grid. Whenever I open the datetimepicker, the calendar appears hidden inside the grid. To tackle this problem, I added the following CSS condition: .dr ...

The link-dark bootstrap class fails to have an impact

As a beginner in using bootstrap, I am creating my first simple website. However, I am facing an issue with the footer copyright section where the class "link-dark" is not taking effect. <!-- Copyright --> <div class="container-fluid ...

CSS - Adjusting width based on height ratio

I'm in the process of developing a website and could use some guidance. I have a specific section where I am aiming for the height to be 79.6% of the body, with the width of that div being dependent on its height. Thus far, my research has only yielde ...

Utilizing Literal and Instance Formats in JavaScript

There are two main methods for creating JavaScript objects. The confusion arises in understanding when to use each notation. Below are examples of both literal and instance variables, each holding different values and producing different results when opera ...

Change the hover effects on the desktop to be more mobile-friendly

In my desktop version, I have implemented some code that enables hovering over a button to display additional information or text. How can I modify this for mobile so that nothing happens when the button is tapped on? .credit:hover .credit-text, .credit- ...

What is causing the mouse to malfunction when interacting with this HTML form?

What is causing the mouse to not work with the form on this specific webpage? The issue here is that the mouse does not seem to be functioning correctly when attempting to interact with the input boxes within the Form. Upon clicking any of the input boxe ...

The checkbox is displayed as selected after being clicked in conjunction with another checkbox

In the tree structure, there are checkboxes that behave strangely when clicked. I have already read a similar discussion here. The problem I am encountering is that when I click on an item, it gets checked but the console does not show it as checked immed ...

Removing nested divs using JavaScript

My website has a nested div structure which contains multiple child divs. Here is an example of the div structure: <div id="outside-one"> <div class="inside" id="1"></div> <div class="inside" id="2"></div> <div ...

Different ways to position 3 images side by side and ensure they are centered on the

I am struggling to center 3 images horizontally on my webpage. Despite aligning them in a row, I cannot seem to achieve the desired centering effect. I have tried various methods to center the images, but nothing seems to work effectively. My goal is to ...

Fixed background & cover design for Internet Explorer 11

Visit this link for more information: http://apolytos.com/new/img/test.html <!doctype html> <html> <head> <meta charset="utf-8"> <style> body { background:url("background.jpg"); background-repeat:no-repeat; backgr ...

The text in the <p> tag will remain the same color

I am encountering an issue with changing the color in the <p> tags within the code snippet below. Specifically, I am trying to change the TITLE text to gray but have been unsuccessful so far. If anyone could provide assistance on this matter, it wou ...

Creating a hover effect on a specific area of a map is a useful technique

Can someone please help me create a hover effect for areas in maps? Below is the code for the map. Thank you in advance! Here is the image. <img src="[CR_kraje_1_úroveň_v1] (imported)" width="770" height="443" border="0" usemap="#map" /> &l ...

Please indicate a width of 3 characters for the HTML input text

Is there a way to create an HTML text box that can only fit 3 characters exactly? I came across this code online: <input type="text" style="width: 10px; padding: 2px; border: 1px solid black"/> This code creates a text box with a width of 10px ...

Display a list of personalized post types and emphasize the item that is currently being viewed

I've created a unique type of post called 'product'. Every product page has a sidebar listing all products, with the current product displayed in bold text. For instance, when viewing product 3, it should appear like this: Sidebar Pr ...

What is causing my Fabric.js canvas to malfunction?

Here is the link to my JSFiddle project: http://jsfiddle.net/UTf87/ I am facing an issue where the rectangle I intended to display on my canvas is not showing up. Can anyone help me figure out why? HTML: <div id="CanvasContainer"> <canvas id ...