Log in

View Full Version : 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 (http://cleverwasteoftime.com/levels/levelone.htm) while being valid, looks the way I want it too.

While the Strict valid page (http://cleverwasteoftime.com/levels/levelonea.htm) has all the content, but obviously does not look how I want it.

Currently here is the HTML for the Strict page:



<!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:



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:
<div id="divid" class="divclass">and
#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:
#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 :D Yes I used # instead of .

Okay, got it now, so silly.