CSS not working in stylesheet
This is just a shot in the dark as (at the time of this post) you haven't provided source code.
Make sure you're linking to your stylesheet using a link
tag in the head
of the HTML document.
If you had:
<style type="text/css">
/* <![CDATA[ */
#someid
{
margin: 0;
padding: 3px 12px;
}
/* ]]> */
</style>
You'll need to have
#someid
{
margin: 0;
padding: 3px 12px;
}
in your CSS file with:
<link rel="stylesheet" type="text/css" href="path/to/style.css" />
to link to the stylesheet.
Some common newbie mistakes include:
<style type="text/css" src="path/to/style.css">
: because it's a similar syntax to the<script>
tag, which would make sense, but is invalid<link rel="stylesheet" src="path/to/style.css">
: butlink
elements use href not src- placing
link
elements within the body: although browsers will tend to managelink
elements in the body, there are likely going to be some errors, and it's not a defined behavior - not specifying a doctype declaration: allows the browser to go into quirks mode, which is never a good idea.
XSL file causing error when stylesheet is included
Well the stylesheet markup is not well-formed, due to <link type="text/css" rel="stylesheet" href="rss_xsl.css" >
which should be <link type="text/css" rel="stylesheet" href="rss_xsl.css"/>
. Then I think the approach works when loading over HTTP. If you load the XML document from the file system then I think Chrome refuses to load the the stylesheet linked to, for security reasons. There might be command line options or settings to change the behavior.
Mixed Content Page: requested an insecure stylesheet error
Here's your problem:
RewriteCond %{SERVER_PORT} ^443$
RewriteRule (.*) http://www.example.com/$1
You don't allow SSL requests (443 port number is used for HTTPS requests). Try removing these lines.
Multiple stylesheets for a single XML document selectable in browser?
Firefox 3.5 Nightly honors the alternate, but there's no built-in functionality to swap the xml-stylesheets, it is only trying to swap stylesheets for the resultant document.
IE 6.0-8.0 do not support alternate="yes" in the xml-stylesheet processing rule.
So it will process the first one, and ignore the second.
MIME type ('text/html') is not a supported stylesheet MIME type
I'm adding a second answer because I think there could be a different issue. I think the MIME Type error could be due to the css path not being correct. I think it is trying to serve up an error instead of the css file which is not matching the MIME type. Try removing the following line from your HTML Template and allowing the HtmlWebPackPlugin to inject it automatically.
<link rel="stylesheet" href="./style.css" />
Below is my own webpack.config and index.html template which I hope will help.
webpack.config
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const LinkTypePlugin = require('html-webpack-link-type-plugin').HtmlWebpackLinkTypePlugin;
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
entry: './src/index.tsx',
output: {
filename: 'app/main.js'
},
devServer: {
contentBase: './',
watchContentBase: true
},
module: {
rules: [
{
test: /\.scss$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
}
},
"css-loader",
"resolve-url-loader",
{
loader: "sass-loader?sourceMap",
options: {
includePaths: [
],
sourceMap: true
}
}
],
exclude: /node_modules/
},
{
test: /\.tsx?$/,
use: {
loader: 'babel-loader'
},
exclude: /node_modules/
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader',
options: {
publicPath: "./",
outputPath: "app"
}
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
plugins: [
new MiniCssExtractPlugin({
filename: './app/style.css',
}),
new HtmlWebpackPlugin({
template: 'index.html'
}),
new LinkTypePlugin({
'**/*.css' : 'text/css'
}),
new CopyPlugin([
{ from: 'assets', to: 'assets' }
])
]
};
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="home_container">
</body>
</html>
Fontawesome 5 icon not showing in normal HTML and CSS file?
Make sure you have installed Font Awesome Package which can be done using this command - npm install --save @fortawesome/fontawesome-free
or use the CDN
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
Related Topics
Blur Img's & Div's in HTML Using CSS
Correct Way to Apply Global Styles into Shadow Dom
Anchor Tag Download Attribute Not Working :Bug in Chrome 35.0.1916.114
Executing JavaScript After X Seconds
Play Pause HTML5 Video JavaScript
Redirect Automatically When Selecting an Item from a Select Drop-Down List
Download Attribute Not Working in Firefox
How to Remove the Parent Element Using Plain JavaScript
Handling "Onclick" Event with Pure JavaScript
Can Multiple HTML Elements Receive Focus at the Same Time
Generate Random Element Position and Prevent Overlapping in JavaScript
Javascript, CSS: Get Element by Style Attribute
How to Fix the Bootstrap Navbar to the Top After a Div Was Scrolled
Link on Certain Position of an Image Background Which Is Responsive