external CSS fails if <!DOCTYPE> is present

Web hosting discussion, programming, and shared and dedicated servers.
7 posts Page 1 of 1
by racerlupine » 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
by ewhac » Thu Jul 18, 2019 4:03 pm
Does this sound like the issue you're having?

https://stackoverflow.com/questions/331 ... ot-to-load
by racerlupine » Thu Jul 18, 2019 10:53 pm
ewhac wrote:
Does this sound like the issue you're having?

https://stackoverflow.com/questions/331 ... ot-to-load


I have seen this post. There's nothing in it that solves the problem. The OP had a mistake in his link tag, which I don't.

If you see something in that thread that I missed do point it out.

thanks

RACER
by drew.phillips » Fri Jul 19, 2019 11:08 am
I can't think of any obvious causes of the problem.

If you open the browser's developer console and look at the network requests and the console for logs/errors, does anything show up that might be helpful?
Drew Phillips
Programmer / System Operations, Sonic.net
by racerlupine » Fri Jul 19, 2019 4:03 pm
drew.phillips wrote:
I can't think of any obvious causes of the problem.

If you open the browser's developer console and look at the network requests and the console for logs/errors, does anything show up that might be helpful?


I have run it using the dev console and it all checks out. I've tried straight html, php include() html, inline CSS, external CSS, all combinations thereof. Whenever <!DOCTYPE> is present CSS fails. (Of course when <!DOCTYPE> is absent the console throws a warning.)

I promise you, weird and random as it seems to be this a common issue for which so far I have found no solution.

thanks

RACER
by drew.phillips » Mon Jul 22, 2019 4:50 pm
By "fails", does the browser network console show it download fine or does the request fail or not request at all?
Drew Phillips
Programmer / System Operations, Sonic.net
by racerlupine » Mon Jul 22, 2019 9:43 pm
Drew,

I found the issue. Apparently the hex colors in CSS have to be preceded by a pound sign for them to work when <!DOCTYPE> is present:

#bodymain {
background-color: #000000;
color: #FFFF00;
}

Without those leading pound signs the hex colors break. That appears to be the whole problem.

Thanks for your attention, I do appreciate it very much.

RACER
7 posts Page 1 of 1

Who is online

In total there are 7 users online :: 1 registered, 0 hidden and 6 guests (based on users active over the past 5 minutes)
Most users ever online was 999 on Mon May 10, 2021 1:02 am

Users browsing this forum: Majestic-12 [Bot] and 6 guests