Okay Twey, let's make a Strict Doctype work!

**BLiZZaRD** · 02-21-2007, 02:38 AM

Alrighty ladies and gentlemen! In a recent round-a-bout with Twey over the compliance standards between transitional and strict doctypes, I have attempted to turn the pages on my site from trans valid to strict valid.

Now, at this current point, I have both pages and both CSS validated.

However, the Trans valid page while being valid, looks the way I want it too.

While the Strict valid page has all the content, but obviously does not look how I want it.

Currently here is the HTML for the Strict page:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Enter The Car</title>
<link rel="stylesheet" type="text/css" href="/levels.css">
</head>

<body>
<h1>1</h1>
<div class="container">
<div class="images">
<map name="cwot">
<area shape='rect' coords='340,130,410,198' href='leveltwo.htm' alt='Enter Here!'>
</map>
<img src="cwot1.jpg" width="500" height="319" usemap="#cwot" alt= "Enter Here!" /><p>
<object type="audio/mpeg" data="/mus1.mp3" width="200" height="20">
  <param name="src" value="/mus1.mp3" />
  <param name="autoplay" value="false" />
  <param name="autoStart" value="0" />
  alt : <a href="/mus1.mp3">Play The Level Music!</a>
</object>
</p>
<p>
If you still need more help with this level go <a href= "/more.html">HERE</a><br />
Or you could try the forum on for size, go <a href= "/forum/">HERE</a> for that.
</p>
</div>
</div>

<!-- THIS is a hint tag! Look for these through out the game, don't get confused witht he very similar looking coding tags.  For now... Just click on the car door! -->	
</body>
</html>

and the valid CSS:

Code:

body {
	padding-left: 2em;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: 600;
	color: #BBD;
	background-color: #000;
}

ul.navbar {
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 2em;
	left: 1em;
	width: 9em;
}

h1 {
	font-family: Georgia, Arial, SunSans-Regular, sans-serif;
}

h2 {
	font-family: Georgia, Arial, SunSans-Regular, sans-serif;
}

h3 {
	font-family: Georgia, Arial, SunSans-Regular, sans-serif;
}

hr {
	border: none 0; 
	border-top: 3px double #C00;
	width: 100&#37;;
	height: 3px;
	margin: 10px auto 0 0;
	text-align: left;
}

ul.navbar li {
	color: blue;
	background: #369;
	margin: 0.5em 0;
	padding: 0.3em;
	border-right: 1em solid black }

ul.navbar a {
	text-decoration: none;
}

a:link {
	color: #FF3030;
	background: #000;
}

a:hover {
	color: #228B22;
	background: #000;
}

a:visited {
	color: #CD2626;
	background: #000;
}

address {
	margin-top: 1em;
	padding-top: 1em;
	border-top: thin dotted;
}

img {
	border-style: none;
}

#container {
	text-align: center;
}

#images {
	text-align: left;
	width: 600px;
}

So I have tried all the "centering" tricks with the Strict type and nothing is working... what do I need to tweak?

**BLiZZaRD** · 02-21-2007, 03:00 AM

Holy crap I did it...

Okay first I got rid of the container stuff (both div and CSS).

I was looking up some things about this and saw one answer said <div id="images">

So I changed "class" to "id" and it is working (at least in FF as that is all I have checked thus far...

So class and id are both strict valid, but they are doing different things?

**Twey** · 02-21-2007, 04:41 AM

The difference between them is that an ID has higher specificity. For example, if you had:

Code:

<div id="divid" class="divclass">

and

Code:

#divid {
  background-color: blue;
}

.divclass {
  background-color: red;
}

... the <div> should have a blue background, since an ID can only refer to one element, and so is the most specific selector one can have.

**BLiZZaRD** · 02-21-2007, 05:39 AM

But if id and class are exactly the same, why would it matter? As far as working and validating goes I mean. This is one that didn't make sense to me (your explanation in reference to the problem) I mean I know what you mean, but it doesn't seem to make workable sense to the issue at hand.

**tech_support** · 02-21-2007, 05:45 AM

All you need is a bit of patience...

**BLiZZaRD** · 02-21-2007, 05:55 AM

Who ordered the fortune cookie?

**Twey** · 02-21-2007, 06:02 AM

Well, unless you've edited, your CSS mentions:

Code:

#container {
        text-align: center;
}

#container means "an element with an ID of container," so it won't apply to something with a class of "container." If you want to select by class, use . instead of #.

**BLiZZaRD** · 02-21-2007, 06:04 AM

Ohhh I had my elements mixed up

Yes I used # instead of .

Okay, got it now, so silly.

Thread: Okay Twey, let's make a Strict Doctype work!

Thread Tools

Search Thread

Okay Twey, let's make a Strict Doctype work!

Bookmarks

Bookmarks

Posting Permissions