HTML Validation

Bananna man

Hey,

I've been doin poster websites for a while now and have only started to learn about validating the code. For example, i am validating a site at the moment and am getting errors like "The background attribute of the TD is not supported", can someone explain a bit about this to me or are their any good resources about this?

Cheers

Bananna man

Also, will i get better search engine ranking if i input a 'name' for all the images on my site and put in some'alternate text' relating to it?

kstanl

You'd be well advised to get your head around semantic markup and Web standards. Have a look at http://www.zeldman.com and http://www.alistapart.com

RobertFoster

If you're using Firefox, I recommend using this HTML Validator extention - it's very helpful. It'll tell you where and what the problem is on the page.

Regarding your "The background attribute of the TD is not supported", I'd say that the background attribute is probably proprietary to Internet Explorer. I believe the fix is by defining that attribute in CSS.

Bananna man

RobertFoster wrote:

If you're using Firefox, I recommend using this HTML Validator extention - it's very helpful. It'll tell you where and what the problem is on the page.

Regarding your "The background attribute of the TD is not supported", I'd say that the background attribute is probably proprietary to Internet Explorer. I believe the fix is by defining that attribute in CSS.

This is going to sound stupid but ........ How do i do that? Im using Dreamweaver MX

Do i really need to worry about these error's. What problems will they cause?

Eoin

Bananna man wrote:

This is going to sound stupid but ........ How do i do that? Im using Dreamweaver MX

The markup should look something like this:

<td style="background-color:blue;">

Bananna man wrote:

Do i really need to worry about these error's. What problems will they cause?

Yes, you should. If you don't stick to standards, then your site could be totally unusable to someone using a different browser. This is even more likely to happen when you are new to HTML, and don't know the workarounds.

Believe it or not, it makes things a lot easier for you in the long run. Since making sure to write compliant html, my development and test time has basically been cut in half, because I know my code will work as expected.

Serbian

eoin_s wrote:

Since making sure to write compliant html, my development and test time has basically been cut in half, because I know my code will work as expected.

I have to say that I have found the opposite to be true in my development. When building with tables, I can be sure that a layout is going to work cross-browser nearly every time. I have found that since I switched to pure CSS layouts I spend far more time tweaking the layout to work across all browsers than I ever did with tables.

That said, once overcoming the initial learning curve, I have managed to get my development time down to at least the same as with tables, and sometimes quicker, depending on how much fiddling I have to do.

Eoin

Serbian wrote:

I have to say that I have found the opposite to be true in my development. When building with tables, I can be sure that a layout is going to work cross-browser nearly every time. I have found that since I switched to pure CSS layouts I spend far more time tweaking the layout to work across all browsers than I ever did with tables.

That said, once overcoming the initial learning curve, I have managed to get my development time down to at least the same as with tables, and sometimes quicker, depending on how much fiddling I have to do.

CSS v Tables is a totally different issue though. You can build a site built with tables for layout, and still have it pass validation (even though W3 recommends CSS over tables for layout).

smeggle

eoin_s wrote:

CSS v Tables is a totally different issue though. You can build a site built with tables for layout, and still have it pass validation (even though W3 recommends CSS over tables for layout).

Huh? You can use css with tables so how can you state css vs tables for layout?

All css is (simply) is moving all of your styling to either an inline style or to a linked style document (Cascading Style Sheet - 'css'). I think your confusing the issue between 'Divs vs Tables'.

Whilst personally I prefer divs, tables should not be abondoned alltogether as they are still a very powerful tool when written and utilised correctly. There styling should be moved to css.

It also depends on the correct document identification being made via the dtd, wether your using html 4.01 transitional, which is the code stated

<td style="background-color:blue;">

Whereas under html 4.01 strict the code is depreceated and really should be moved to either an inline style or css document like so

.tdclass {
      background-color: #BCD6FE;
}

where .td would be identified in your table element like so

<td class="tdclass">

The beauty of this is that it can be more easily applied globally to all td elements. To change backgrounds of individual td's, then a seperate class name must be used for each seperate td and the corresponding style be applied to your css.

Makes no difference if that is applied to divs or tables the same applies....

Eoin

smeggle wrote:

Huh? You can use css with tables so how can you state css vs tables for layout?

All css is (simply) is moving all of your styling to either an inline style or to a linked style document (Cascading Style Sheet - 'css'). I think your confusing the issue between 'Divs vs Tables'.

Whilst personally I prefer divs, tables should not be abondoned alltogether as they are still a very powerful tool when written and utilised correctly. There styling should be moved to css.

Yes, but it is the CSS that defines the position of the divs, instead of using tables to do so. This was my point. And I also agree about the tables, especially as most of my sites are intranet type of applications with lots of tabular data.

smeggle

eoin_s wrote:

Yes, but it is the CSS that defines the position of the divs, instead of using tables to do so. This was my point. And I also agree about the tables, especially as most of my sites are intranet type of applications with lots of tabular data.

Ah right I understand what you meant now.. sorry my apoligies - thought you had confused the usual tables/divs argument. You do know you can position tables via css like you do with divs? Just identify them in the css under id instead of class unless you want the effect to be global over a complete set of individual tables - say for instance like having three seperate tables positioned left of page.

All of there styling can be set globally, height, width, background-color etc via the css - makes life so much easier...

I generally allways nest the tables inside a div element as I find I have more control over what happens with the table that way.

Moving everything to css as well maintains xhtml compliancy - you can get away with it in xhtml transitional but not in xhtml 1.0 strict...

Eoin

smeggle wrote:

Ah right I understand what you meant now.. sorry my apoligies - thought you had confused the usual tables/divs argument. You do know you can position tables via css like you do with divs? Just identify them in the css under id instead of class unless you want the effect to be global over a complete set of individual tables - say for instance like having three seperate tables positioned left of page.

All of there styling can be set globally, height, width, background-color etc via the css - makes life so much easier...

I generally allways nest the tables inside a div element as I find I have more control over what happens with the table that way.

Moving everything to css as well maintains xhtml compliancy - you can get away with it in xhtml transitional but not in xhtml 1.0 strict...

I do realise that CSS positioning etc applies to tables, but the impression I get is that tables should only be used to display data that should logically appear in tabular format, not to position items on a page.

smeggle

eoin_s wrote:

I do realise that CSS positioning etc applies to tables, but the impression I get is that tables should only be used to display data that should logically appear in tabular format, not to position items on a page.

First time I've seen someone quote w3c on tabulatur - I thought for a while I was going nutty on that one as no one agreed lol

but yeah your right that is what tables are for and as you seem to be aware the styling of them padding, border, margin, bckground-color etc etc is handled in the css. The positioning as you've indicated should be done by nesting the group of tables with in a div and positioning of that again of course is done in the css.

Thats the quickest route to xhtml/css compliancy allthough granted theres a couple of other things required.

every thing written in lower case
meta tags implicitly closed
image tags implicitly closed
line break implicitly closed

Thats about it really. I had the basics of xhtml/css inside of a couple of weeks and love the stuff - no way would I ever go back to the older standards of html 4.0/4.01 - it's just an abject mess imo.

but yeah - your right tables should only be used to display data that is intended or as you say should logically appear in tabular format.

smeggle

eoin_s wrote:

I do realise that CSS positioning etc applies to tables, but the impression I get is that tables should only be used to display data that should logically appear in tabular format, not to position items on a page.

First time I've seen someone quote w3c on tabulatur - I thought for a while I was going nutty on that one as no one agreed lol

but yeah your right that is what tables are for and as you seem to be aware the styling of them padding, border, margin, bckground-color etc etc is handled in the css. The positioning as you've indicated should be done by nesting the group of tables with in a div and positioning of that again of course is done in the css.

Thats the quickest route to xhtml/css compliancy allthough granted theres a couple of other things required.

every thing written in lower case
meta tags implicitly closed
image tags implicitly closed
line break implicitly closed

Thats about it really. I had the basics of xhtml/css inside of a couple of weeks and love the stuff - no way would I ever go back to the older standards of html 4.0/4.01 - it's just an abject mess imo.

but yeah - your right tables should only be used to display data that is intended or as you say should logically appear in tabular format.

kstanl

Eh........ nevermind.

hostyle

smeggle wrote:

Thats about it really. I had the basics of xhtml/css inside of a couple of weeks and love the stuff - no way would I ever go back to the older standards of html 4.0/4.01 - it's just an abject mess imo.

For giggles: http://www.hixie.ch/advocacy/xhtml

smeggle

I gave up reading after this bit

Unfortunately, IE6 does not support application/xhtml+xml (in fact, it
does not support XHTML at all).

The last bit '(in fact, it does not support XHTML at all)' had me in those fits of giggles you mention. I think the writer is getting a little confused with I.E. 5/5.5 and I.E. 6.0. Whilst essentially I.E. 6.0 or it's redering engine is actually I.E. 5.0 modifications were made so that if you write in text/xhtml it parses and renders correctly.
This only holds true though if you construct your head tag correctly, get it wrong and the browser automatically reverts to I.E. 5.0 and your page is messed up. It's one of my own little pet niggles - incorrect head construction - and theres not many coders who take the time to do it correctly. Mostly in these cases the coder cheats and uses the 'transitional' identifier which orders the browser not to be so strict.

I skimmed a little more and found the example on forward slash/close bracket. What they fail to mention is that it only happens with I.E. and it requires the 'space' before the forward slash/close bracket. I'll look over it more closely but I so no mention as to why it's used.

The problem that they mention came about with the older browser and the cure was to place a 'space' between the forward slash and the end of your code before closing. This was also a backwards compatibility issue in how html 4.0/4.01 was parsed and rendered and how xhtml was parsed and rendered.
The problem though was corrected in I.E. 6.0 but only if your document was 'Valid' and that doesn't mean your ok if the w3c validator validates your code. The validator ignores most of what you write in the head, meta tags and such whereas your browser does not or the I.E. browser doesn't. Construct it wrong and you'll get problems or some of the problems mentioned.

I.E. 7.0 is (Supposedly) fully compliant and renders xhtml as text/xhtml - as I say, supposedly - time will tell.....

Thanks for the giggle hostyle

edit: btw - For those who still use the older html 4.01/css and in particular the 'css hacks' needed for i.e. 6.0 - heres something I came across at another Forum I use
http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx

simply put - your gonna have fun when I.E. 7.0 is finally issued - unless your using xhtml/css of course

hostyle

Oh dear, I think you may have a few "incorrect head construction" problems of your own.

Serbian

smeggle wrote:

For those who still use the older html 4.01/css and in particular the 'css hacks' needed for i.e. 6.0 - heres something I came across at another Forum I use
http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx

simply put - your gonna have fun when I.E. 7.0 is finally issued - unless your using xhtml/css of course

I don't think you understood the article. The issue is not with HTML 4.01 or xHTML, it's with the Doctype that you use. If you use a strict Doctype, you are likely to run into problems if you have used IE specific CSS hacks. They just used an example of a site that uses a HTML 4.01 Doctype.

It is has been our policy since IE6 that under quirks doctype we will not make any behavioral changes so that existing pages will continue to render unmodified, but under the strict doctype we want to change behavior to be as compliant as possible with the web standards.

smeggle

Serbian wrote:

I don't think you understood the article. The issue is not with HTML 4.01 or xHTML, it's with the Doctype that you use. If you use a strict Doctype, you are likely to run into problems if you have used IE specific CSS hacks. They just used an example of a site that uses a HTML 4.01 Doctype.

I understand that. If you use the strict doc type especially in xhtml then you also have to be careful in how you construct the header of the xhtml and ensure it is 1. in the correct order and 2. each tag is implicitly closed. Otherwise the browser (Usually I.E. 6.0 - The others are slightly more forgiving) , the browser can or may switch to quirks mode. This includes the css link being in the wrong place as mine are now currently.

The correct and only reconised meta tag order is
title
charset
meta tag for robots
meta tag for rating
meta tag for robots to revisit after a specific time
meta tag for keywords
meta tag for discription
css link tag

Other tags used like dating Owner, copyright etc are not strictly reconised though can be used without being penalised. The browser ignores these.

Source: W3C Schools

@ kstanl - I suppose thats a crowd of these 'Blaggers' your going on about? As opposed to microsoft who set there own standards and with the advent of I.E. 7.0 have been literally forced to follow standards?

Serbian

smeggle wrote:

I understand that. If you use the strict doc type especially in xhtml then you also have to be careful in how you construct the header of the xhtml and ensure it is 1. in the correct order and 2. each tag is implicitly closed. Otherwise the browser (Usually I.E. 6.0 - The others are slightly more forgiving) , the browser can or may switch to quirks mode. This includes the css link being in the wrong place as mine are now currently.

I don't really know where you are coming from with this. If you are still referencing the MSDN blog which I was talking about, then you have it completely wrong. The point of the MSDN article:

• If you use the Strict Document Type (whether it's xHTML or HTML 4.01 or any other type of HTML) IE 7 will not behave like previous versions of Internet Explorer, it will try to adhere to standards and should fully understand CSS inheritance, thus causing problems with IE specific hacks.
• If you use the loose document type or no Doctype at all, IE7 will render documents like IE6.

There's nothing else to that article. It has nothing to do with the order of your meta-tags or the actual validity of your HTML, these things are simply implied and beside the point.

If you are not talking about the MSDN article then ignore this post as I have no idea what you are referencing. Also, could you provide a link to the W3C source where it specifies meta-tag order?

Bananna man

I satrted this topic in complete ignorance of CSS and have since been busy beavering away to get to grips with it. Anyways, i have a new question. When i am "checking target browsers" I am getting this error:

Error parsing style [Microsoft IE for Macintosh 5.2]

The code that this error relates to is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head>
<title>css_stylesheet</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Should i just ignore this error as i dont think there is much i can do about it?

Serbian

It looks like you are putting that code into an external stylesheet? If so, you don't put HTML into a style sheet, you just list the styles by themselves. Here's an example of a simple style sheet:

/* My Stylesheet */
body {
   margin: 0;
}

.someclass {
   font: normal 0.8em Verdana;
   color: #333333;
   border: 1px solid #cccccc;
}

/* The end of My Stylesheet */

Bananna man

Thanks, thats sorted it. Im using dreamweaver and opened a new html file instead of stating with a css file.

Also, are absolute dimensions (in px) supported by all browsers? (and are these what layers are?)

I found this on a site:

"Absolute Positioning--Not all browsers can read absolute positioning. When it is used, the content on web pages can become jumbled or even overlap in some browsers. At this point in time, using tables to control the layout of web pages is our only alternative."

If this is the case what good is positioning things with CSS?

seamus

Bananna man wrote:

I found this on a site:

"Absolute Positioning--Not all browsers can read absolute positioning. When it is used, the content on web pages can become jumbled or even overlap in some browsers. At this point in time, using tables to control the layout of web pages is our only alternative."

If this is the case what good is positioning things with CSS?

You see, you're opening up a whole other can of worms here. The CSS2 specifications clearly outline how the dimensions of an element should be calculated, but different browsers calculate different dimensions, even when you explicitly specify them by pixels. It's muchos frustrating at times.

It does seem (and is at times) easier to use tables for layout, but if you stick with CSS, you'll come to appreciate the vastly superior amount of control it gives you over your pages, and the better visuals you can achieve with it.

As it is, I'm still a big novice with CSS, but I've grown to love it.

Bananna man

Thanks Seamus

So am i right in saying that it will give me better control of layout but may not be viewed properly by people using IE5 and earlier. I would have thought alot of people still use IE5!!!!!

seamus

What I've found is that you can get the page to display with 90-95% similarity across all browsers, with a little care and effort. You can find things like bottom bars being slightly different sizes, but without affecting the overall look of the page. If you really put in a lot of effort, or you know your CCS inside-out, you should be able to get it to display indentically in most of the popular browsers.

With tables though, you can get things to look pretty much identical in all browsers, and with little care about your code. This is why so many people will still rely on tables for layout - quick, simple money generators.

smeggle

Bananna man wrote:

Thanks Seamus

So am i right in saying that it will give me better control of layout but may not be viewed properly by people using IE5 and earlier. I would have thought alot of people still use IE5!!!!!

Don't get that many through my stats now - generally most update to i.e. 6.0 anyway and most will (Hopefully if they still use it) update to i.e. 7.0 when it's finally released to the public..

Seriously if you want to learn css and it's awesome capabilities go over to csszengarden - They follow W3C compliancy religiously and there linked resources are second to none - none that I've found anyway.



btw - You'll find it a lot easier to move to notepad for this...