Member Avatar for LanierWexford

I have been trying to learn HTML/CSS for about a year now as a hobby and I have developed a good base knowledge and I figured before I got to far ahead of myself I would learn all of the proper rules, so I have begin to read HTML 4.01 Specification from the W3C website. I have add the fowling DTD to my HTML code and it causes my style to loose all back ground color. Is the problem in my HTML or could it be in my CSS. I have attached my .php. It works just fine with out the DTD in the first line. Thanx in advance

Lanier

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                      "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

	<title>The Kedrows</title>
	<link  href="Styles/CSStry.css" rel="stylesheet" type="text/css">
	<META http-equiv="Content-Style-Type" content="text/css">
</head>

<body>
	<div id="header">
		<h1> Welcome to the Kedrows </h1>
		<h2> Who are the Kedrows?</h2>
	</div>


	<div id="nav-menu">
	<ul><li> <a href="pages/the_fam.html">The Fam</a></li>
	<li><a href="PIX/mom.jpg">Robyn</a></li>
	<li><a href="PIX/themonkey.jpg">Adelle</a></li>	
	<li><a href="PIX/littledude.jpg">Jack</a></li>
	</ul>
	</div>

	<div id="footer">
		
		<div id="right">
			<h3 clear: both;>What is the purpose?</h3>
		</div>
		
		<center>
		<p id="info">
			This domain was created to give my family and I a permanent e-mail address that we could be assured would remain relatively spam free and for the most part everything 
			is going as planed.
		<br> 
		<br>
			The second reason for the domain is to teach myself web design. This has proven to be a slow process.
		<br> 
		<br>
			The big project at the moment is learning PHP/MySQL in order to create a robust cook book for my wife.  I am also still trying to nail down HTML and CSS.
		</p>

		<font size="5"> If your feeling froggy you can sign our <a href="http://www.thekedrows.com/gbook">guest book</a></p></font>
		</center>

	</div>

</body>
</html>
  • 4 Contributors
  • 5 Replies
  • 120 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by LanierWexford

Dani AI

Generated

A short, practical diagnosis and checklist based on what happened in this thread.

Adding a standards doctype switches browsers from quirks mode to standards mode. That change alters default box model, default margins, and how backgrounds on the root/body are painted — so a page that looked fine in quirks mode can suddenly lose its background in standards mode. See MDN for how doctypes affect rendering modes: MDN: Quirks Mode and Standards Mode.

Practical checks (in order)

  • Make the doctype the very first thing in the document (no BOM, no whitespace, no comments before it). This is what tells the browser to enter standards mode.
  • Pick one valid markup flavor and stick to it. As warned, do not mix XHTML namespace attributes with an HTML4 doctype. If you follow and move to XHTML, use the correct XHTML doctype and consistent markup.
  • If the background seems missing, try applying/ensuring these CSS basics: set html, body { height: 100%; margin: 0; } and put the page background on body (or explicitly on both html and body) so it fills the canvas. Example:
    html, body { height:100%; margin:0; }
body { background-color:#f0f0f0; }
  • Validate the page to catch markup errors that standards mode will expose: W3C Validator. Validation often shows what broke when you added the doctype.

Summary: ’s placement tip and ’s suggestion to use XHTML pointed you toward the fix; confirmed the switch worked. The underlying cause is usually the standards-mode behavior change — fixable by consistent markup, correct doctype placement, and the small CSS tweaks above. For reference on doctypes and body-background behavior see MDN: Doctype and MDN: body element.

Recommended Answers

All 5 Replies

Member Avatar for MidiMagic

I suggest that you move to xhtml.

Member Avatar for almostbob 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

minor bug with this, the doctype is html 4, so xml namespaces are illegal.

bangs head on desk,
read the prior post about shift to xhtml, and messed up
things you do, without thinking, bite you in the bum

Member Avatar for LanierWexford

switching to XML did the trick, plus another rung in the latter of learning. Thanx MM

Lanier

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.