Sign in to follow this  
JimPrice

[web] Doctype issues in HTML (probably solved)

Recommended Posts

JimPrice    815
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]

Share this post


Link to post
Share on other sites
nmi    978
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">

Share this post


Link to post
Share on other sites
JimPrice    815
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]

Share this post


Link to post
Share on other sites
Colin Jeanne    1114
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%.

Share this post


Link to post
Share on other sites
JimPrice    815
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.

Share this post


Link to post
Share on other sites
igni ferroque    415
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this