external CSS fails if <!DOCTYPE> is present
Posted: Wed Jul 17, 2019 4:13 pm
I have searched the web for HOURS trying to figure this out. I have 2 files: mung.html and sin.css. They are together in the same directory.
Here's mung.html:
<!DOCTYPE html>
<html>
<head><title>]nlr[ -XX mung.html XX-</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="sin.css">
</head>
<body id="bodysin">
<h2>BEGIN</h2>
<hr><h2>END</h2>
<h1>mung</h1>
<p>text</p>
<h1>BEGIN</h1>
<h2>END</h2>
</body>
</html>
Here's sin.css:
#bodysin {
background-color: 000000;
color: 99FFFF;
}
#bodymain {
background-color: 000000;
color: FFFF00;
}
#tright {
float: right;
font-size: 14px;
width: 49%;
}
#tleft {
float: left;
font-size: 14px;
width: 40%;
}
h1, h2 {
font-size: 28px;
}
h6 {
font-size: 7px;
}
p {
font-size: 14px;
}
tr, td {
font-size: 14px;
}
a:link {
color: 3399FF;
}
a:visited {
color: FF00FF;
}
The issue is the <!DOCTYPE html> statement. If it's there, the CSS fails; if it's NOT there, the CSS works. I've tried all the variations of <!DOCTYPE>, make no difference. Tried Chrome, Opera, Firefox, Pale Moon, makes no difference. Obviously I can't omit <!DOCTYPE html>!!
WTF??
thanks
RACER
Here's mung.html:
<!DOCTYPE html>
<html>
<head><title>]nlr[ -XX mung.html XX-</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="sin.css">
</head>
<body id="bodysin">
<h2>BEGIN</h2>
<hr><h2>END</h2>
<h1>mung</h1>
<p>text</p>
<h1>BEGIN</h1>
<h2>END</h2>
</body>
</html>
Here's sin.css:
#bodysin {
background-color: 000000;
color: 99FFFF;
}
#bodymain {
background-color: 000000;
color: FFFF00;
}
#tright {
float: right;
font-size: 14px;
width: 49%;
}
#tleft {
float: left;
font-size: 14px;
width: 40%;
}
h1, h2 {
font-size: 28px;
}
h6 {
font-size: 7px;
}
p {
font-size: 14px;
}
tr, td {
font-size: 14px;
}
a:link {
color: 3399FF;
}
a:visited {
color: FF00FF;
}
The issue is the <!DOCTYPE html> statement. If it's there, the CSS fails; if it's NOT there, the CSS works. I've tried all the variations of <!DOCTYPE>, make no difference. Tried Chrome, Opera, Firefox, Pale Moon, makes no difference. Obviously I can't omit <!DOCTYPE html>!!
WTF??
thanks
RACER