Having trouble loading CSS in Firefox?

After creating a basic responsive website, I encountered an issue where Mozilla was not loading the CSS properly when the site was hosted on my server. Interestingly, the CSS loaded fine on Chrome and IE when viewed from my computer.

Here is a snippet of the HTML code:

<head>
    <meta charset="utf-8">
    <title>Mate Ajdukovic | Developer</title>
    <link rel="stylesheet" href="css\normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css\main.css">
    <link rel="stylesheet" href="css\responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Here's a snippet of the CSS code (from main.css):

body {
    font-family: 'Open Sans', sans-serif;
 }

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
 }

I'm wondering if the issue lies with the encoding or if there's something specific that needs to be included in the main.css and responsive.css files?

I haven't made any alterations to my Mozilla settings, and I am using version 31.0.

To view the website, you can visit: http://test.mateajdukovic.com

Any insights or help would be greatly appreciated. Thank you!

Answer №1

The issues are as follows:

"NetworkError: 404 Not Found - http://test.mateajdukovic.com/css%5Cnormalize.css"
"NetworkError: 404 Not Found - http://test.mateajdukovic.com/css%5Cmain.css"
"NetworkError: 404 Not Found - http://test.mateajdukovic.com/css%5Cresponsive.css"

Resolve this problem by replacing the \ with / in your HTML code.

Answer №2

I'm not completely certain, but in my opinion, you should utilize the forward slash.

Instead of "\" use "/" in the path of the href tag

Meaning:

Use this:

<meta charset="utf-8">
    <title>Mate Ajdukovic | Developer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

Everything else looks fine.

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

Vertical alignment of text within a center位置

My current project involves creating a website layout similar to this: https://i.sstatic.net/5i1BK.png I am facing difficulty in centering the text within the box like this: https://i.sstatic.net/lCaFQ.png This is my progress so far: @font-face { ...

Struggling to create a line break within an SVG using the <tspan> element?

I have a pair of text lines that are wrapped in <tspan> tags. <tspan dy="-11.7890625">welcome</tspan> <tspan dy="16.8" x="285.75">text</tspan> I am trying to add a line break between them, but the <br> tag is not worki ...

Retrieve the JSON response from the server and store it in variables using jQuery's AJAX function with the `done

I am trying to retrieve a JSON response from the server upon clicking a button and then parse it into a div. However, I am struggling with how to accomplish this. <button type="submit" id="btPay" name="btPay"> Go for Pay ...

Is there a quicker alternative to the 500ms delay caused by utilizing Display:none?

My div is packed with content, including a chart from amCharts and multiple sliders from noUiSlider. It also features various AngularJS functionalities. To hide the page quickly, I use $('#container').addClass('hidden'), where the rule ...

Using JQUERY, CodeMirror adds elements to the HTML editor

I have been utilizing CodeMirror for my project, specifically the "HTML Editor With Preview" module. To test its functionality, I created a fiddle: --> http://jsfiddle.net/Vu33n/6/ While I successfully got the editor to work, I am currently facing an ...

Tips for achieving a full div image on hover

I'm having trouble with my CSS code for an image hover effect in a div. The image is appearing larger than the div and leaking out of it. How can I make sure the image stays contained within the div? Here's the updated CSS code: img { display ...

Creating a custom form validation within a modal window featuring tab navigation, all styled with the latest Bootstrap

Within a modal, I have incorporated a header with tabs and tab content in the body, following the structure of Bootstrap 5. The modal footer includes buttons separated by dots. When encapsulating the modal body and footer within a form tag for validation ...

Is there a potential issue with descender tags causing the malfunction of HTML and CSS tags?

Having some trouble with my <p> tag in the CSS. Can't seem to figure out why it's not working correctly. Any help is appreciated. Here's the HTML: <body> <section> <section id="pictures"> <div> < ...

Reading settings from web.config file in an HTML page

Currently working with ASP.NET 3.5 web forms. I've recently saved the path of my website in the web.config file under the key "CommonPath". I have a basic static HTML page that I would like to utilize this key on. Any suggestions on how to achieve ...

How can you update the background image of a particular div using the 'onclick' feature in React.JS?

Thank you for helping me out here. I'm currently working with ReactJS and facing a challenge where I need to change the background of a div from a color to a specific image URL upon clicking a button in a modal. Despite my efforts, I keep encountering ...

Guide to creating a smooth div fade transition with jquery on hover or mouseover

I have a div that is initially set to display:hidden. I am looking to change the display property to display:block when a specific element (#navbar li a) is hovered over. Below is the JavaScript code I have written for this functionality. $('document ...

Using HTML and CSS to Position Text Within an Image

Is there a way to position an image next to specific points on the screen so that it remains in the same place regardless of screen size? Here is what I am trying to achieve: https://i.stack.imgur.com/A5cop.png Using HTML, this is my desired setup: < ...

What is the best method for adjusting height in MaterialUI components?

Is there a way to remove this white line from the image?view image here When I set the height to 100%, it appears like this:view image here ...

Could the quantity of JavaScript files impact the performance of a project and cause any delays?

In my current HTML and JavaScript project, I am incorporating multiple JavaScript files. I'm curious to learn about the potential impact of having numerous JavaScript files on a web project's efficiency and speed. Can anyone shed some light on th ...

Is there a way to dynamically update one input field while another input field is being modified? [HTML / JS]

I have a form with 3 input fields. One of the inputs is disabled, while the other two are enabled. The goal is to combine the values entered in the enabled fields to populate the disabled field. How can this be achieved? Is it possible for the value in th ...

The functionality for dragging elements is not functioning properly in JavaScript

Here is the code I used in an attempt to make a div element draggable: let div = document.querySelector('div') div.onmousedown = function() { div.addEventListener('mousemove', move, true) } window.onmouseup = function() { window. ...

AngularJS selectChosen does not have built-in support for translation

<select chosen options="myOptions" ng-model="StatCode" data-placeholder="{{'PleaseSelect' | translate}}" ng-options="item[0] as item[1] + ' / ' + item[0] for item in myOptions" required>< ...

Attempting to get a webGL game downloaded from Unity to automatically enter fullscreen mode

Can someone help me with my Unity webGL game issue? I downloaded it from the internet, but I'm not sure what version of Unity was used to create it. When the game starts playing, it displays in a small canvas along with other elements like the Unity ...

Issues with link behavior when using Angular UI-Router

I am just starting to learn AngularJS and I'm trying to figure out how to pass a parameter using anchor tags within the $stateProvider code. I've been attempting to do so, but it doesn't seem to be working. Can someone guide me on the correc ...

Select Multiple Checkboxes in Bootstrap/HTML

Is there a way to make it so that selecting one checkbox will automatically select all the others in Bootstrap/HTML? ...