Find the right Doctype

sidekarsten · 2011-10-12 17:17:31

Hey, I have some problems with choosing the right doctype, or in any case, having my page validate with the one I have chosen.

Although my site works fine where ever I have checked it, the W3C validator comes up with many errors and warnings, that mostly seem to be caused by incorrect doctypes. I don’t really get what the problems are about. Many errors are for example reported in the use of “ in the meta tags… but I don’t have a clue what I can do about that.

If anyone has some tips or suggestions as to how to get at least the majority of the errors out of my page, please let me know, your help is much appreciated.

This is what W3C has to say about the matter: http://validator.w3.org/check?uri=http://sidestone.com

maruchan · 2011-10-12 19:26:56

First one there: Your Facebook meta tags…I’ve read somewhere that you can wrap those in HTML comments and FB will still read them. So that might be worth a try.

Other errors: You have tag attributes (like “REL”) in uppercase, and even in Transitional XHTML they need to be lowercase (like “rel”).

Then you’ve got a <script> tag which in Transitional XHTML needs to say <script type=“text/javascript”>.

Also when one of your pages or forms uses an ampersand anywhere, even in a URL, you should encode it—write it as “&” rather than just “&”.

You’ve also got a tag like this in your source: <\/script> which should just be </script>.

There’s a bunch more, but maybe you can try fixing those and see if you’re ready to take on the rest. :-)

GugUser · 2011-10-13 02:07:17

More details:

First you have <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />, further below <meta http-equiv="content-type" content="text/html; CHARSET=iso-8859-1" />.

And twice each:

<script type="text/javascript" src="http://www.sidestone.com/tools/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.sidestone.com/tools/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

In Addition: Put all your CSS and JS in external files.

<body scroll="yes">: What attribute is that?

Or, random question: Why this style attribute <img src="http://www.sidestone.com/images/414.png" alt="" style="width: 25px; height: auto;" width="40" height="40" />.

Etc.

There is so much to correct that it is impossible to be listed all here. Work on your codes (from scratch).

sidekarsten · 2011-10-13 08:50:39

Dear Maruchan and Guguser,

thanks for the tips, I know there is a lot wrong, but well… I’m not really a programmer, I’m an archaeologist, so I’m doing the best I can, and your help is thus much appreciated!

I changed some things you suggested, and the error count is down from 112 to 97 :)

With regards to some of your points, the following answers/questions

__
The strange style attribute ““width: 25px; height: auto;” width=“40” height=“40”“ > this is a bit weird, but the 40-40 bit is apparently added by TXP, I don’t know how I can make TXP stop doing that and only include my manually added 25-auto attribute. This is the TXP code I used to call in this image:

<txp:image id=“414” style=“width: 25px; height: auto;” />

__
<body scroll=“yes”> at least in FF this forces a scrollbar on the right. Most pages are “long” enough to have a scrollbar, but some don’t, if not the whole centre field shifts slightly to the right as the scrollbar disappears and doesn’t take up space any more. By forcing the scrollbar to appear, this doesn’t happen. I thought it is looks slightly better. By I gather it isn’t good code?

__
I know I do occasionally use css to style images, but I don’t want to make a different class for each images, so If I want to style a particular image, I just use some inline css. Perhaps not perfect, but I don’t think it is really wrong, is it?

__
@ Maruchan… the Facebook tags you said “wrap those in HTML comments” what does that mean? put them somewhere in the body section instead of the head? or in an invisible div of some sort?

___

I found the <\/script> code… which looks strange, but it is apparently part of some Jquery thingy. I don’t really understand how these things work, so I found them on the web, free for use, so copy pasted these things. When I change <\/script> to <\script> however, something goes wrong with the site… so apparently the \/ does really do something. These things are part of the Fancybox code that I grabbed and copy pasted and it does work… if I change something it stops working so for the time being I think I’d better leave it like this, especially as I don’t really get Java/Jquery

__
> this is all what happens If two people try to set up a small business but don’t have a few thousand euro’s to hire a proper programmer… :)

But again, with your help we make do for the moment! Thanks alot!

maruchan · 2011-10-13 14:24:35

Coming along :-)

I know I do occasionally use css to style images, but I don’t want to make a different class for each images, so If I want to style a particular image, I just use some inline css.

You can re-use the same class for multiple images. Eventually inline CSS will become difficult to manage compared to editing a single common area in your stylesheet.

<txp:image id=“414” style=“width: 25px; height: auto;” />

Change that to <txp:image id=“414” width="0" height="0" style=“width: 25px; height: auto;” /> and it will stop inserting the extra data.

if not the whole centre field shifts slightly to the right as the scrollbar disappears and doesn’t take up space any more

In my experience it’s just something you notice when you start to work on your own website. This behavior (no scrollbar when you can’t scroll / show scrollbar when you can) is expected and very common. And anyway scroll=yes is probably not the best way to “fix” it, certainly not in a variety of browsers.

“wrap those in HTML comments” what does that mean?

It means change that area from this:

<meta etc... />
<meta etc... />

to this:

<!-- <meta etc... />
<meta etc... />
-->

So you can see I’ve just put those funny “HTML Comment” markers before and after those meta tags. It’s a way of making them invisible to the W3C validator that you’re using.

When I change <\/script> to <\script> however, something goes wrong with the site

That should be </script> (using a right-leaning slash) or else you’ll definitely have something go wrong. :-)

Let’s fix those ampersands, too!

Last edited by maruchan (2011-10-13 14:24:45)

sidekarsten · 2011-10-14 16:07:15

Thanks Maruchan,

Did what you suggested, got the wrappers, got the height-width. I use inline css basically only to style single images in unique ways to line them on that particular page, that particular position. Find that it is easier to do that using inline css instead of making a seperate class somewhere in the style sheeth.

Have removes the scroll=yes too. However the </script> doesn’t work. When I remove the \/ suddenly '); appear at the top of the page, so we don;t want that. Again… this code is how I grabbed it from the Fancybox page (used for modal windows and popup images) so I guess it is there for a reason.

I changed some of the ampersands too, however, I found that sometimes they don’t work. I have for example a form (posted as part of a Textile using article) with a list of countries, some of which use the & symbol. When I use the “&” code, it will just display the “&” instead of the &…. so. I decided to leave them in for the time being. Also I have several article titles that use the & symbol. When I change these to “&” and hit safe… they are just turned back to & symbols by TXP itself…

At the moment, with your help, we’re now down to 95 errors … some have to do with the use of the &, but I do not dare to change those as they are part of Java/Jquery script. I suppose I cannot just change those to & ??

Also W3C seems to have lots of problems with the use of closing > at the end of tags for some reason…?

Anyway, Thanks for your help!

maruchan · 2011-10-14 22:59:55

I use inline css basically only to style single images in unique ways to line them on that particular page, that particular position

Ah, perfectly fine then.

However the </script> doesn’t work. When I remove the \/ suddenly ‘); appear at the top of the page, so we don;t want that.

Can you link us to the Fancybox page with the code you’re using? We should check that out, get to the bottom of the weird code so that this odd tag doesn’t break other things for you.

I changed some of the ampersands too, however, I found that sometimes they don’t work. I have for example a form (posted as part of a Textile using article) with a list of countries, some of which use the & symbol.

Can you paste the form here in the forum, using Textile’s “bc..” for block-code display? It’d be nice to be rid of those ampersand errors…right?

Also W3C seems to have lots of problems with the use of closing > at the end of tags for some reason…?

This is a shortcoming of W3C validators and usually points to a problem somewhere else in the code, maybe one or two errors back—you fix one place and it fixes five or ten or twenty other errors sometimes. :-)

Other things I’m seeing: You have <br> tags that should be <br /> in XHTML, and you have at least one <center> which is illegal in XHTML (use margin:0 auto CSS on a div or something instead if you have to), and you’re re-using IDs in some places (can only re-use classes, so just change those IDs to classes in the code and CSS).

It also looks like maybe some of your tags are missing end tags. Like <div> without a matching </div>, which can happen easily when you don’t indent your code in the editor (use the space bar…two spaces per indent should really help you catch those things better). You might also try putting comments after your closing </div> tags so they say things like </div>  in order to help you see which closing tag is doing what.

Last edited by maruchan (2011-10-14 23:02:29)

sidekarsten · 2011-10-17 07:19:16

Hi Maruchan,

Thanks for all the tips… wil have a look at it all, unfortunatley no time at the moment, need to work on my PhD thesis now. The Fancybox \/script thingy can be found if you just download the fancybox installation from http://fancybox.net/. Unzip the folder and open index.html. There it is line 9:

Last edited by sidekarsten (2011-10-17 07:19:35)

GugUser · 2011-10-17 12:40:46

It seems that you have made your Code on the basis of the fancybox website. For example: the code between the lines 81-340 is taken from there and does not make sense for your site. A lot of your code don’t make sense. That’s why I wrote above, you should start from scratch.

sidekarsten · 2011-10-18 21:17:13

Maruchan,

I got rid of all <br>‘s and <center>‘s, thanks for those tip.

the form that includes the & is a txp article using textile in which the following is put:

<txp:zem_contact_select selected=“Netherlands” label=“Country:” break=”“ list=“Afghanistan,Albania,Algeria,Andorra,Angola,Antigua & Deps,” />

I shortened the list with names, but suppose you get the idea. If I replace & with & it will just say “&” in the pull-down list.

@ GugUser, the website is just online for 3 weeks…. so no… I won’t start from scratch again… this is by the way what I made from scratch in the first place. Problem is that I’m not a webdesigner but an archaeologist. I know basic html/css but really do not properly understand java/jquery. When I need these things, I copy paste and hope that it works… I know that there is a lot that is probably not used or is incorrect, but so far the website does what I want it to do, cross-browser above all, so hey, I’m happy with that. When we get a lot of money, we’ll hire a proper programmer :)

With all your help and comments guys, the site has been improved from a programming point of view, so many thanks for that! We’re now down further to 84 errors! Most errors are now down to use of & symbol in Java code and the < > symbols around tags…

maruchan · 2011-10-18 21:39:35

There’s still Facebook stuff in there, which sacrifices validation for browser compatibility. So that will be harder to fix.

But there’s a lot of other stuff. You might want to pick up a book on XHTML and just go right down your code, line by line, see what you can spot. I still see problems with capitalization (just make all your tag attributes lower case), tag ordering, etc. This information is readily available in most books on XHTML.

For example: <a href="/webshop/"><h2>new books</a></h2> is in there. You can see that you’ve got your tags sort of interleaved. It should be <h2><a etc...>new books</a></h2>.

I also see <font> tags and those aren’t legal in XHTML. I wish I had time to work through all 84 errors, but I think it will be easily manageable if you put some study into XHTML. You’ll be glad you did.

Last edited by maruchan (2011-10-18 21:39:59)

els · 2011-10-18 21:53:15

sidekarsten wrote:

and the < > symbols around tags…

If you have tags inside articles, try wrapping them in <notextile>...</notextile> tags.

Textpattern CMS

Textpattern CMS support forum

#1 2011-10-12 17:17:31

Find the right Doctype

#2 2011-10-12 19:26:56

Re: Find the right Doctype

#3 2011-10-13 02:07:17

Re: Find the right Doctype

#4 2011-10-13 08:50:39

Re: Find the right Doctype

#5 2011-10-13 14:24:35

Re: Find the right Doctype

#6 2011-10-14 16:07:15

Re: Find the right Doctype

#7 2011-10-14 22:59:55

Re: Find the right Doctype

#8 2011-10-17 07:19:16

Re: Find the right Doctype

#9 2011-10-17 12:40:46

Re: Find the right Doctype

#10 2011-10-18 21:17:13

Re: Find the right Doctype

#11 2011-10-18 21:39:35

Re: Find the right Doctype

#12 2011-10-18 21:53:15

Re: Find the right Doctype

Board footer