I have a webpage that I am trying to validate with w3. It says I need to add <!DOCTYPE html> to the page above the <html> tag so I did. As a result, my CSS messed up.
Using the "web developer" in the latest Firefox, I saw that the CSS file is loading over the network just fine, but under the style editor, it says for that CSS file 0 rules even though there should be 25 rules. When I edit the CSS file in the style editor (even simply hitting the enter button on a new line) it applies the CSS file and everything works just fine.
I also tried taking the CSS code and putting it directly into the html file and it works then to.
So the problem is when I load the CSS externally. I have done lots of research and the most common suggestions say:
- Adding the switches modes to quirks mode (or visa versa) and to include
html,body{height:100%;} in your CSS. (Check and already done, no differences)
- Make sure to use the
type="text/css" (Check and already done, no differences)
- End the link tag with a
/> (Check and already done, no differences)
Does anyone have any idea why the web browser is not applying my css code?
Here are some code samples:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>StudiOm Yoga, Jackson MS</title>
<link rel="stylesheet" href="libraries/jquery-ui-1.12.1.custom/jquery-ui.css">
<script src="libraries/jquery-3.2.1.min.js"></script>
<script src="libraries/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script>
<?php
if($_SESSION['generalsettings']['showwelcomemessage'] == "checked")
{
?>
$( function() {
$( "#dialog" ).dialog();
} );
<?php
}
else
{
?>
$( function() {
$( "#dialog" ).hide();
} );
<?php
}
?>
</script>
<link rel="stylesheet" type="text/css" href="style/default.php"/>
</head>
My head section including the beginning html tag and doctype html tag.
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #ffffff;
}
a:-webkit-any-link {
color: inherit;
text-decoration: none;
cursor: grabbing;
}
a:link {
color:inherit;
}
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5 {
position: relative;
opacity: 0.65;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("../images/website/allsmaller2.jpeg");
min-height: 100%;
background-repeat: repeat;
background-position: left;
background-size: 100% auto;
}
.bgimg-2 {
background-image: url("../images/website/ddog.jpg");
min-height: 60%;
}
.bgimg-3 {
background-image: url("../images/website/leg.jpg");
min-height: 60%;
}
.bgimg-4 {
background-image: url("../images/website/hangingwide.jpeg");
min-height: 60%;
}
.bgimg-5 {
background-image: url("../images/website/yoga5.jpg");
min-height: 100%;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.title
{
display:inline;
background-color: #111;
color: #fff;
border-radius: 6px;
padding: 15px;
margin: 0% 0%;
font-size: 25px;
letter-spacing: 10px;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #777;
}
.larger
{
font-size: 50;
}
a:visited
{
color:#ffffff;
}
div.table {font-size:20px;display: table;border:1px solid white; margin-left: auto; margin-right: auto; width:85%;}
div.tablerow {display:table-row; border:1px solid white; text-align:center;}
div.tablecol {display:table-cell; border:1px solid white;}
div.schedule {padding: 10px;}
div.table2 {font-size:20px;display: table; margin-left: auto; margin-right: auto; width:85%;}
div.tablerow2 {display:table-row; text-align:center;}
div.tablecol2 {display:table-cell; vertical-align:middle;}
div.tile
{
display: inline-block;
max-height: 300px;
max-width: 200px;
box-shadow: 5px 5px grey;
border: 2px solid black;
margin: 20px 20px;
}
#sn
{
filter:invert(100%);
}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: scroll;
}
}
@media only screen and (max-width: 500px)
{
div.table {display:block; border:1px solid white;margin-left:auto; margin-right:auto; width:75%;}
div.tablerow {display:block;border:1px solid white;}
div.tablecol {display:block;border:1px solid white;padding:10px;}
div.table2 {display:block; border:1px solid white;margin-left:auto; margin-right:auto; width:75%;}
div.tablerow2 {display:block;border:1px solid white;}
div.tablecol2 {display:block;border:1px solid white;padding:10px;}
}
My CSS file that is not being applied.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
