CSS presented in plain text format on GitHub Pages

Whenever I access my github pages site on americano-project.github.io, the css files are being transferred as plaintext instead of text/css. Consequently, my browser (firefox 25.0.1) fails to load the css properly.

Here is how the css is embedded:

<link rel="stylesheet" type="text/css" src="/css/tmp.css" />
<link rel="stylesheet" type="text/css" src="/css/toast.css" />

The code can be found in a github repository. Can you help me figure out what is causing this issue?

Answer №1

Make sure to use href instead of src (I had the same issue with Chrome 33 until I made the change).

<link rel="stylesheet" type="text/css" href="/css/temporary.css" />
<link rel="stylesheet" type="text/css" href="/css/notification.css" />

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

Is there a way for me to prevent a particular file from being cached by web browsers?

Is there a way to prevent Web Browsers from caching a particular file? For example: <img src="myImage.jpg" cache="false"></img> If possible, how can this be achieved? The code <meta http-equiv="cache-control" content="no-cache" /> ins ...

Ways to customize the design of a bootstrap button using jQuery

<a class="btn btn-small btn-block btn-warning" type="button" id="999">&nbsp;</a> Looking to customize the button style? Check out http://getbootstrap.com/2.3.2/base-css.html#buttons I'm interested in changing the button's style ...

What is the best way to select a clicked span element within a div using JQuery and then adjust the spans before and after it

<div> <span>A</span> <span>B</span> <span>C</span> <span>D</span> </div> If a user clicks on one of the spans within the div, I want to apply styles (such as text color) to that span and all prec ...

"An issue with AngularJS ngTable causing a delay in the rendering of Ajax

Struggling with ngTable Setup Having trouble mastering the use of ngTable by going through the ngTable ajax demo. I attempted to follow along with the example as closely as possible, but I'm encountering a deviation in defining an ngResource inline w ...

Ways to iterate through an array within a datatable

I have a javascript function that renders a table like this: $('#serviceTable').DataTable({ responsive: true, aaData: services, bJQueryUI: true, aoColumns: [ { mData: 'service_name&a ...

Struggling to select the accurate end date from the datepicker while using a Python script

I'm currently using the Google Chrome browser and running a Python script to automate date selection in a datepicker. However, I'm having an issue with selecting the correct end date. The script keeps choosing "02/01/2022" as the end date, wherea ...

What could be causing the constant issue of receiving an empty $_FILE when attempting to upload a file using ajax and php

I am currently utilizing ajax to send form data and upload files from the client to the server (php). An issue arises when attempting to access the file content on the server side - for reasons unclear, the $_FILES variable appears empty regardless of my ...

In Mobile View, I want to swap out my current image for text to keep it hidden

I am attempting to include text that is only visible in Mobile View as a replacement for my logo. Below is the code I am using: CSS: @media only screen and (max-width:1024px) { header .logo { display: none; } header .logo a { display: non ...

Encountering issues with deploying a NextJS application using GitHub Actions

I'm currently facing an issue while attempting to deploy my nextJS application on GitHub pages. The error occurs during the deployment phase. Within my node.js.yml file, I have the following configuration: name: Node.js CI on: push: branches: ...

When I access the website through the LinkedIn app, my CSS styles are getting jumbled up

Is there a way to resolve the problem I'm facing with CSS when accessing the site through the LinkedIn app on iPhone? The issues don't occur on Android. If anyone has a solution, please share. Thank you :) Click Here ...

What is the best way to position items of varying heights in alignment?

Can someone help me with this issue? I have a grid with 12 columns, each containing 2 identical icons and 2 texts of different heights. I need to align the icons in the center and make sure the texts are at the same height, but I'm having trouble achi ...

Occasional issue with the drop down menu not appearing correctly

I'm experiencing some difficulties with displaying a dropdown menu. Check out the fiddler link for reference: http://jsfiddle.net/GxrSk/ Below is the simplified HTML code: <nav> <ul id="top-menu"> <li class="parent"> ...

I'm interested in creating an animation for the appendChild() function that gives it a subtle fade-in effect

Hey there! I'm looking to incorporate a fade-in effect into a Chrome plugin that appears using appendChild(). I'm envisioning something like this: document.body.appendChild(div).fadeIn(1000); Is there a way to achieve this? ...

Positioning a floating div to the right side within a wrapper element

Is there a way to align my navicon menu button to the right edge of the wrapper div on screens smaller than 768px without causing it to float outside of the wrapper? Currently, when I try to move the navicon button to the right side using floating, it appe ...

Steps to insert a large image into a div while maintaining the size ratio

https://i.sstatic.net/WvBbF.png I'm struggling to add a logo to the right corner of this div The logo size is too big and it doesn't adjust properly to the existing div height and width Below is the code I've tried, but the image is ruini ...

Is it possible for me to insert a hyperlink that will show a PDF in a web browser without triggering a download?

I am looking for a way to allow visitors to my website to easily access and view a PDF directly in their browser by clicking on a specific URL or button. I want the PDF to be displayed within the browser itself, rather than prompting a download. Any guidan ...

What is the proper way to showcase the hover effect on a nested ul list item in the DOM?

In an attempt to create a menu, I have written the following code: var sheet_nav = document.createElement('style'); sheet_nav.innerHTML = "nav{ margin: 100px auto; text-align: center;}"; document.head.appendChild(sheet_nav); var sheet_nav_ul = ...

Mobile media screen overrides CSS styles

I'm having an issue with my layout where the media screen for mobile is overriding my main CSS. On a laptop, the layout shows an orange color, but on mobile, it switches to yellow. Here's a snippet of my code: /* main container */ #resume ...

Turning my dual button navigation into tabs to display distinct HTML pages beneath a designated header

body{ background:url(background.jpg); background-size: cover; } h1{ font-family: 'Dancing Script', cursive; font-size: 5em; color: white; text-align: center; margin-top: 25px; margin-bottom: 20px; } h2{ font-size: 18px; color: white; text-align ...

Issue with ng-maxlength directive

In my Angular 4 Application, I am attempting to implement validation for form inputs. Specifically, I want to restrict inputs with numbers to not accept more than 4 digits. If the input contains more than 4 digits, the form should be marked as invalid. I a ...