I have a styles problem when loading headers, content and footers with jquery. For some unknown problem, only the content is loaded, regardless of the styles.
The current code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function () {
$("#header").load("header/header.html");
$("#footer").load("footer/footer.html");
$("#content").load("content/content.html");
});
</script>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
Header.html I get a error js: (Refused to apply style from 'http://127.0.0.1:XXXX/project/css.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.) Although neither "src" or "href" works
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="../css.css">
</head>
<body class="bodyHeader">
<hr>
HEADER
<hr>
</body>
</html>
css.css
.bodyHeader {
background-color: lightblue;
}
.bodyFooter {
background-color: lightslategray;
}
.bodyContent {
background-color: lightyellow;
}
I currently display text without styles.
HEADER
CONTENT
FOOTER
I want to visualize:
DIV [all content, measurements and styles] HEADER
DIV [all content, measurements and styles] CONTENT
DIV [all content, measurements and styles] FOOTER
Without any of them overlapping and respecting the distances.
Is it jquery problem?