Adobe Community: Help with W3 validation

Currently Being Moderated

Help with W3 validation

May 7, 2012 8:54 AM

Tags: #cs5 #dreamweaver #javascript

I have 5 errors on my page: http://www.healthquestpt.com/hpc/index.html and because these are related to working with an external javascript, I dont know how (or if I should) to fix them and have it all still work properly. Any help is greatly appreciated!

1561 Views 18 Replies Latest reply: BcSurvivor08, May 12, 2012 11:50 AM

Replies

Currently Being Moderated

1. David_Powers,

May 7, 2012 9:03 AM in reply to BcSurvivor08

Report

The errors don't have anything to do with an external JavaScript.

It's because you are using an XHTML Strict doctype.

The problems in lines 77 and 78 are because you're using camel-case for onMouseOver and onMouseOut. In XHTML, the attributes must be all lowercase: onmouseover and onmouseout.

The problem on line 108 is because the ampersand hasn't been encoded correctly:

?counter={a657bf54-87e8-6464-dd5e-a19c9a61d085}&template=simple"

Should be this:

?counter={a657bf54-87e8-6464-dd5e-a19c9a61d085}&template=simple"

Also, you're using the background attribute on a table cell. That's not permitted in XHTML strict.

|
Mark as:
Currently Being Moderated

2. BcSurvivor08,

May 7, 2012 1:37 PM in reply to David_Powers

Report

Thank you very much Mr. Powers. I got the ampersand taken care of as well as the upper to lower case issues. I still have one error that I cant figure out how to resolve. I actually have it 3x's but it's only flagging the first one.

<td class="tabnav" background="images/tab1.gif" width="120" height="25" valign="bottom">
          <center><a href="hospitals.html"
              onmouseover="jsfx.fadeIn('tvscreen','hospital')"
              onmouseout="jsfx.fadeOut('tvscreen')"><b>Hospitals</b></a></center></ td>
          <td class="tabnav" background="images/tab2.gif" width="170" height="25" valign="bottom">
          <center><a href="clinical.html"
              onmouseover="jsfx.fadeIn('tvscreen','practice')"
              onmouseout="jsfx.fadeOut('tvscreen')"><b>Clinical Practices</b></a>
          </center>
          </td>
          <td class="tabnav" background="images/tab1.gif" width="120" height="25" valign="bottom">

It says "no background attribute" I tried using css to define the backbround image but it would cut them off.

Here is the full code of the table these are nested in:

<div class="col2">
<table width="412" align="center" class="style1">
          <tr>
          <td class="tabnav" background="images/tab1.gif" width="120" height="25" valign="bottom">
          <center><a href="hospitals.html"
              onmouseover="jsfx.fadeIn('tvscreen','hospital')"
              onmouseout="jsfx.fadeOut('tvscreen')"><b>Hospitals</b></a></center></ td>
          <td class="tabnav" background="images/tab2.gif" width="170" height="25" valign="bottom">
          <center><a href="clinical.html"
              onmouseover="jsfx.fadeIn('tvscreen','practice')"
              onmouseout="jsfx.fadeOut('tvscreen')"><b>Clinical Practices</b></a>
          </center>
          </td>
          <td class="tabnav" background="images/tab1.gif" width="120" height="25" valign="bottom">
          <center><a href="patients.html"
              onmouseover="jsfx.fadeIn('tvscreen','patient')"
              onmouseout="jsfx.fadeOut('tvscreen')"><b>Patients</b></a></center></t d></tr></table>


                <table width="412" cellspacing="0" cellpadding="0" border="1" align="center" bgcolor="#ffffff">
                      <tr>
                      <td background="images/window1.gif">
                            <img name="tvscreen"
                                src="images/window1.gif" width="412" height="217" class="imgFader" border="0" alt="" /></td>
                      </tr>
        </table> </div>

Here are the related CSS classes:

.col2
{
float: left;
margin-left: 70px;
}

.style1
{
font-family: Arial;
font-size:14px;
font-weight: bold;
text-align: center;
}

.tabnav a
{
text-decoration: none;
font-family: "arial narrow";
font-weight: bold;
font-size: 14px;
color: #0052a4;
padding: 0;
}

.tabnav a:hover
{
color: #1e1e1e;
text-decoration: underline;
}

Since the W3 validation is only flagging Line 73 and not the other <td>'s do I need to worry about fixing it? If so, please help because everything I tried messsed it up.

Thanks!!!!!!!!!!!!!!!

|
Mark as:
Currently Being Moderated

3. Nancy O.,

May 7, 2012 1:45 PM in reply to BcSurvivor08

Report

align="center" and bgcolor="#ffffff" are deprecated (obsolete) in XHTML.

Use CSS to style your tables and cells. If you want to center tables, use CSS width, and margin:0 auto.

table {
width: 500px;
margin:0 auto;
background-color: #FFF;
}

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

|
Mark as:
Currently Being Moderated

4. BcSurvivor08,

May 7, 2012 5:23 PM in reply to Nancy O.

Report

its not the align or center that is showing error- its the background image in the <td> tag

|
Mark as:
Currently Being Moderated

5. Nancy O.,

May 7, 2012 6:06 PM in reply to BcSurvivor08

Report

The whole point of modern web standards is to keep HTML markup as simple as possible and use CSS for styles.

Where you have this:

<td class="tabnav" background="images/tab1.gif" width="120" height="25" valign="bottom">

Change to this:

<td class="tabnav">

Then style .tabnav with CSS like so:

.tabnav {
background: url(images/tab1.gif) no-reapeat;
width: 120px;
min-height: 25px;
vertical-align: bottom;
}

How to Develop with CSS? (a must read)
http://phrogz.net/css/HowToDevelopWithCSS.html

Nancy O.

|
Mark as:
Currently Being Moderated

6. BcSurvivor08,

May 7, 2012 7:31 PM in reply to Nancy O.

Report

The images still aren't showing up. Here is the link to the page: http://www.healthquestpt.com/hpc/

and here is the corresponding css:

.tabnav1 a{
background-image: url(../images/tab1.gif) no-repeat;
width: 120px;
min-height: 25px;
vertical-align: bottom;
text-decoration: none;
font-family: "arial narrow";
font-weight: bold;
font-size: 14px;
color: #0052a4;
padding: 0;
}
.tabnav1 a:hover
{
color: #1e1e1e;
text-decoration: underline;
}
.tabnav2 a {
background-image: url(../images/tab1.gif) no-repeat;
width: 170px;
min-height: 25px;
vertical-align: bottom;
text-decoration: none;
font-family: "arial narrow";
font-weight: bold;
font-size: 14px;
color: #0052a4;
padding: 0;
}
.tabnav2 a:hover
{
color: #1e1e1e;
text-decoration: underline;
}

I tried:

background:url(images/tab1.gif) no-repeat;

background-image:url(images/tab1.gif) no-repeat;

background:url(../images/tab1.gif) no-repeat;

background-image:url(../images/tab1.gif) no-repeat;

none of these worked either and the tab1.gif and tab2.gif are in the same folder as all the rest: images

Thanks for your help!!

|
Mark as:
Currently Being Moderated

7. David_Powers,

May 8, 2012 4:40 AM in reply to BcSurvivor08

Report

This line is wrong:

background-image: url(../images/tab1.gif) no-repeat;

It should be this:

background: url(../images/tab1.gif) no-repeat;

I have just tested it on your site, using Firebug to edit your CSS. The images show up. However, it looks as though they're in the wrong place. Since I don't know what your original design was, it's difficult to offer much more help.

|
Mark as:
Currently Being Moderated

8. osgood_,

May 8, 2012 5:13 AM in reply to BcSurvivor08

Report

Your short-hand css seems to be stopping the images from showing

Change this:

background-image:url(../images/tab1.gif) no-repeat;

to:

background-image:url(../images/tab1.gif);
background-repeat: no-repeat;

and add display: block; to the css for .tabnav1 and .tabnav2 (as shown below)

.tabnav1 a{
background-image: url(../images/tab1.gif);
background-repeat: no-repeat;
    width: 120px;
     text-decoration: none;
    font-family: "arial narrow";
    font-weight: bold;
    font-size: 14px;
    color: #0052a4;
    display: block;
}

|
Mark as:
Currently Being Moderated

9. BcSurvivor08,

May 8, 2012 11:10 AM in reply to osgood_

Report

Its almost there. If you can help me get the text to drop down to almost the bottom of the tab1.gif it will be perfect.

Here is the updated page:http://www.healthquestpt.com/hpc/

And the corresponding css:

.tabnav1 a{
background: url(../images/tab1.gif);
background-repeat:no-repeat;
display:block;
width: 120px;
min-height: 25px;
vertical-align: bottom;
text-decoration: none;
font-family: "arial narrow";
font-weight: bold;
font-size: 14px;
color: #0052a4;
padding: 0;
}
.tabnav1 a:hover
{
color: #1e1e1e;
text-decoration: underline;
}
.tabnav2 a {
background: url(../images/tab2.gif);
background-repeat:no-repeat;
display:block;
width: 170px;
min-height: 25px;
vertical-align: bottom;
text-decoration: none;
font-family: "arial narrow";
font-weight: bold;
font-size: 14px;
color: #0052a4;
padding: 0;
}
.tabnav2 a:hover
{
color: #1e1e1e;
text-decoration: underline;
}

|
Mark as:
Currently Being Moderated

10. BcSurvivor08,

May 8, 2012 6:52 PM in reply to BcSurvivor08

Report

So, since my images worked the way I had them, why does W3 validator say its an error. I obiviously cannot achieve the appropriate look with css. Why Why Why cant this be as simple as <td background image....> I dont understand.....

|
Mark as:
Currently Being Moderated

11. osgood_,

May 8, 2012 11:57 PM in reply to BcSurvivor08

Report

BcSurvivor08 wrote:

Its almost there. If you can help me get the text to drop down to almost the bottom of the tab1.gif it will be perfect.

Add some top padding to the anchor tags, see below - padding: 10px 0 0 0; - adjust as required to position

.tabnav1 a{
background: url(../images/tab1.gif);
background-repeat:no-repeat;
display:block;
width: 120px;
min-height: 25px;
vertical-align: bottom;
text-decoration: none;
font-family: "arial narrow";
font-weight: bold;
font-size: 14px;
color: #0052a4;
padding: 10px 0 0 0;
}

|
Mark as:
Currently Being Moderated

12. osgood_,

May 8, 2012 11:58 PM in reply to BcSurvivor08

Report

BcSurvivor08 wrote:

So, since my images worked the way I had them, why does W3 validator say its an error. I obiviously cannot achieve the appropriate look with css. Why Why Why cant this be as simple as <td background image....> I dont understand.....

What do you mean the validator says its an error?

|
Mark as:
Currently Being Moderated

13. BcSurvivor08,

May 9, 2012 8:10 AM in reply to osgood_

Report

The padding worked to drop the links down, but now the javascript that changes the window (window.gif) below it no longer works and it dropped that window down 15px as well. I want the tabs to be right on top of the window.gif

When I ran the page through the w3 validator (the orginal working/looking right one) it said that it was not allowed attribute to give <td> a background image.

This was my ORIGINAL code:

<table width="412" align="center" class="style1">
          <tr>
          <td class="tabnav" background="images/tab1.gif" width="120" height="25" valign="bottom">
          <center><a href="hospitals.html"
              onmouseover="jsfx.fadeIn('tvscreen','hospital')"
              onmouseout="jsfx.fadeOut('tvscreen')"><b>Hospitals</b></a></center></ td>
          <td class="tabnav" background="images/tab2.gif" width="170" height="25" valign="bottom">
          <center><a href="clinical.html"
              onmouseover="jsfx.fadeIn('tvscreen','practice')"
              onmouseout="jsfx.fadeOut('tvscreen')"><b>Clinical Practices</b></a>
          </center>
          </td>
          <td class="tabnav" background="images/tab1.gif" width="120" height="25" valign="bottom">
          <center><a href="patients.html"
              onmouseover="jsfx.fadeIn('tvscreen','patient')"
              onmouseout="jsfx.fadeOut('tvscreen')"><b>Patients</b></a></center></t d></tr></table>


                <table width="412" cellspacing="0" cellpadding="0" border="1" align="center" bgcolor="#ffffff">
                      <tr>
                      <td background="images/window1.gif">
                            <img name="tvscreen"
                                src="images/window1.gif" width="412" height="217" class="imgFader" border="0" alt="" /></td>
                      </tr>
        </table> </div>

But Im assuming this wouldnt work in some browsers. Although I checked it in IE9, FF, Safari and Opera and it worked, but I have all the newest versions.

Maybe I should just put it back like this?

|
Mark as:
Currently Being Moderated

14. Nancy O.,

May 9, 2012 9:48 AM in reply to BcSurvivor08

Report

Background is not a valid table attribute. It is a style property. To fix it, change this:

<td class="tabnav" background="images/tab1.gif" width="120" height="25" valign="bottom">

To this with an inline style:

<td class="tabnav" style="background-image:images/tab1.gif" width="120" height="25" valign="bottom">

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

|
Mark as:
Currently Being Moderated

15. BcSurvivor08,

May 9, 2012 2:58 PM in reply to Nancy O.

Report

HALLELUJAH!!!! Nancy that worked PERFECTLY!!!!!!!!!!! I spent so much time messing with this and it was as simple as changing that one line of code.

You are so so so sharp!!! THANK YOU THANK YOU THANK YOU!!!

(When I grow up I want to be just like you LOL )

|
Mark as:
Currently Being Moderated

16. BcSurvivor08,

May 11, 2012 8:27 PM in reply to BcSurvivor08

Report

New site..... every page validates except for 3 errors on each one and its in the DW onLoad script. I have all the images preloading... Whats wierd is I used this feature for my other site and all of those pages pass....

Anyway, here is the url: http://www.healthquestpt.com/garegion2/index.html if anyone can offer guidance, I'd greatly appreciate it!!!

|
Mark as:
Currently Being Moderated

17. Nancy O.,

May 12, 2012 10:47 AM in reply to BcSurvivor08

Report

When is an error not an error?
W3C validation tests are simply a tool to help you spot the source of potential problems. Not all browsers honor web standards.

Experienced developers know which validation errors are significant and which to ignore. Proprietary browser codes often don't validate. Codes to fix browser bugs don't validate. Codes for Facebook and Twitter buttons don't validate. Should you stop using them? Of course not. If they don't create problems for your pages, don't worry about them.

Nancy O.

|
Mark as:
Currently Being Moderated

18. BcSurvivor08,

May 12, 2012 11:50 AM in reply to Nancy O.

Report

Good advice, I wont worry about them. I'm one of those OCD people that want perfect scores on everything I do LOL.

The problem is I have no idea which errors will cause problems - But I will assume that code provided by DW must be ok. Im just perplexed by the fact two different sites with the same code and one "passes" one shows the errors. But not going to spend time trying to figure it out

|
Mark as: