Back to General and Gameplay Programming

[web] Doctype issues in HTML (probably solved)

General and Gameplay Programming Programming

Started by JimPrice May 25, 2005 07:23 PM

4 comments, last by igni ferroque 18 years, 10 months ago

JimPrice

815

Author

May 25, 2005 07:23 PM

Disclaimer : This isn't game related. If this is a problem, any passing mod can feel free to delete it. I'm putting together a website at the moment for my business (yup, was slow getting that off the ground, but hasn't seemed to hurt too much). I'm very much a newcomer to HTML, so it's a painful process. Just when I thought I had it cracked I came up with a problem. I just ran the website through the validator listed in the faq. This alerted me to the need for a leading doctype clause. So I inserted one. I had lovely formatting before - it auto re-sized to the screensize, which is exactly what I wanted. Now it's too darn wide - and I have no idea why. I thought the code I'd written was to the required standard anyway, so I'm not sure why it's changing the formatting. The only change is the addition of the doctype line. Can anyone see what's going on? HTML code for website - first line is the offender


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
  <title>Strength In Numbers - Mathematical and Statistical Services</title>
  <link rel="stylesheet" href="SIN.css">
</head>

<body>

<div class="mainarea">

  <div class="headertext">
   <h3>Welcome to Strength In Numbers</h3>
  </div>

  <div class="text">
    <p>
      Welcome to Strength In Numbers Mathematical and Statistical Services. 
    </p>
  </div>

</div>

</body>
</html>

Accompanying css code


div.mainarea
{
  background-color : white;

  position : absolute;

  top : 0.5em;
  left : 0.5em;

  width : 100%;
  height : auto;

  border-left : 3em solid #CCCC99;
}


div.headertext
{
  background-color : transparent;
  color : #582E46;

  position : relative;
  left : -1.75em;
  width : 100%;

  margin-top : 1em;

  padding-top : 0.5em;
  padding-left : 2em;

  border-top : thin solid #582E46;
}


div.text
{
  background-color: white;

  position : relative;
  left : -1.75em;
  
  width : 100%;

  padding-left : 2em;
  padding-right : 2em;
  padding-top : 2em;
  padding-bottom : 1.5em;

  margin-bottom : 1em;

  border-left : thin solid #572E46;
  border-top : 1em solid #572E46;
  border-right : thin solid #572E46;
  border-bottom : thin solid #572E46;
}


ul.mainnavbar
{
  list-style-type : none;
  margin : 0;
}


ul.mainnavbar li
{
  display : inline;
  background : white;
  margin-left : 1em;
  border-right : 1em solid black;
}


a:link
{
  color : blue;
}


a:visited
{
  color : purple;
}

Oh yeah, and I get a 'no character encoding' issue as well, but I'm still working out exactly what that entails... Thanks in advance for anyone kind enough to comment, Jim. [Edited by - JimPrice on May 25, 2005 9:13:00 PM]

nmi

978

May 25, 2005 07:41 PM

A document type definition DTD is, simply said, a set of grammar rules for a parser, that parses your HTML-file.

The HTML standard predefines some DTDs. Look at the standard, to know where those DTDs are located. But you may provide your own DTD as well. If your documents can be parsed by those rules, it matches this DTD. So to be standard compliant, you need to match one of the standard DTDs.

The 'no character encoding' issue means, that you didn't tell the parser (i.e. your browser), which encoding you used for this document. You should add a line specifying that this document is in UTF-8 encoding, for instance. See the standard for details about that.

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

JimPrice

815

Author

May 25, 2005 08:21 PM

Quote:
A document type definition DTD is, simply said, a set of grammar rules for a parser, that parses your HTML-file.

The HTML standard predefines some DTDs. Look at the standard, to know where those DTDs are located. But you may provide your own DTD as well. If your documents can be parsed by those rules, it matches this DTD. So to be standard compliant, you need to match one of the standard DTDs.

Yeah, I'd figured that bit out from the validation page. Just not sure why the formatting change is happening when I add the DTD. Presumably it's because it's being interpreted in a different way, but then why is it working without the specification? For example, if I specify v3.2, it formats exactly how I want it, but when you try and validate it it doesn't like the <div class="whatever"> lines - presumably because this wasn't valid syntax under 3.2. Then again, maybe I'm just doing my CSS wrong.

Quote:
The 'no character encoding' issue means, that you didn't tell the parser (i.e. your browser), which encoding you used for this document. You should add a line specifying that this document is in UTF-8 encoding, for instance. See the standard for details about that.

Yeah, I'd just about got my head around that. Of course, I still have no idea what the options are, but UTF8 seems pretty standard.

Thanks for the comments,
Jim.

Edit : Think I've solved it - changing all the widths to auto seems to work - unlike before.

The crazy, crazy world of HTML.

[Edited by - JimPrice on May 25, 2005 9:21:42 PM]

Colin Jeanne

1,115

May 25, 2005 09:15 PM

It is being interpreted differently. Documents that are without doctypes (or of certain doctypes) get rendered in Quirks Mode - a mode in which browsers emulate rendering bugs that were common in older versions in order to not break older webpages.

You'll just have to play with your styles some more. The reason it's too wide is because your border is 3em and you specify width as 100%.

JimPrice

815

Author

May 25, 2005 10:04 PM

Thanks, I've never heard of quirks mode (although it seems strangely appropriate).

Quote:
You'll just have to play with your styles some more. The reason it's too wide is because your border is 3em and you specify width as 100%.

I believe I was making some assumptions about what 100% meant that weren't consistent with what it actually means - that is, I thought that would mean 100% of the space remaining after the margin was deducted.

Again, I think it was one of those problems you look at for ages going stark, staring mad; then you type in a question, and understanding blossoms.

Or is that just me?

I contine to learn.
Jim.

igni ferroque

415

May 26, 2005 01:35 AM

Most browsers adjust their layout behavior according to the DTD specification. The main difference between quirks and standards mode is whether or not the margin is included in width calculation. That is why your widths were off.

See this site for details.

Free Mac Mini (I know, I'm a tool)

[web] Doctype issues in HTML (probably solved)

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

[web] Doctype issues in HTML (probably solved)

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

Reticulating splines