Div around contact form

No, that is not correct. The errors being flagged are in the HTML. Fixing the HTML clears the errors. The CSS styles affect the look of the page and give you the appearance that you seek.

About the HTML Validator

I recommend adding the “HTML Validator” add-on to Firefox before you read the next message so you can follow along in Firefox and see the results for yourself. The add-on validator is much easier to read than the on-line validator and the explanations of the errors are much clearer.

The Validator is a tool that is useful to help a person write good code. The HTML Validator is not a perfect tool. It will recognize many common errors, but if it sees something that it does not recognize, it flags it as an error although it may not be a real error. The HTML Validator is an aid to writing good HTML; it is not an oracle.

About CSS

CSS does not directly affect the number of errors reported by the HTML Validator. However, when CSS is used to replace deprecated HTML tag attributes, the HTML error count goes down.
There is a separate online CSS Validator. http://jigsaw.w3.org/css-validator/

– more to follow –

Dreamweaver applies an XHTML doctype. The requirements of the XHTML Validator determine what is flagged as an error.

First: XHTML Validator vs. JavaScript
The greatest number of “error flags” on your page are coming from the JavaScript used by your menus. These are probably not real errors, but the XHTML validator thinks they are.

If you comment out the JavaScript menu code so the XHTML Validator cannot see it, the error count drops from 32 to 8 errors. This does not hide the JavaScript from the menus. It only hides it from the XHTML Validator.

<script type="text/javascript">
<!--//--><![CDATA[//><!--    //ADD this line of Comment Marks
function MM_preloadImages() { //v3.0
 . . . . 
}
//--><!]]>    //ADD this line of Comment Marks
</script>

Second: Required attributes
Your menus use 4 foreground images. Foreground images are expected to include the alt=" " attribute so some text will be visible if the image is missing or the user has images turned off.
ADD an alt=" " attribute to each of the 4 tags in the menu. (Add text to describe the menu item; eg: alt="contact", alt="galleries", etc.)
That will reduce the error count from 8 to 4.
– one example – alt=“home” is the last attribute in the <img> tag. –

        <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/html-images/home-4.jpg',1)"><img src="images/html-images/home-3.jpg" width="235" height="52" id="home" alt="home" /></a></td>

Third: Improper HTML
Beneath the menu is an empty <table> tag. It should never have existed. Delete this line.
That will reduce the error count from 4 to 3.

  <table width="940" border="0" cellpadding="0" cellspacing="1"></table>

Fourth: Required attributes
The <textarea> tag expects two required attributes (in the same way that <img> tags expect the alt= attribute). The rows=" " attribute is expected to have a value as shown in this example.
Add cols="16" and rows="4" to the <textarea> tag and the error count drops from 3 to 1.

'<textarea name="Comments" id="Comments2" cols="16" rows="4"></textarea>'

Fifth: Deprecated attributes
The height="94" attribute in this <table> tag (around the <textarea> field) is deprecated and should be replaced with CSS. For the time being, just delete it.
That reduces the error count to zero, but several warnings appear.

<td height="99" colspan="2"><table width="280" height="94" border="0">

Sixth: Warnings
The four <label> tags are empty and therefore flagged as warnings. Had the form been constructed differently they would not be empty.
Change the nested tables by copying the text in the first <td> tag into the empty <label> tag. Then replace the text in the first <td> tag with the entire <label> tag and its text. Like this:

          <tr>
            <td colspan="2">
              <table width="281" border="0">
                <tr>
                  <td width="107" align="left" valign="middle" class="heb"><label for="name">שם מלא:</label></td>
                  <td width="162" height="62"><input type="text" name="name" id="name" /></td>
                </tr>
              </table>
            </td>
          </tr>

The following attachment contains these changes. It validates clean. The CSS is unchanged.

By example, the simple answer your question is: CSS does not make invalid HTML valid. Improper HTML, examples of which are shown above, make HTML invalid. CSS styles the appearance of the page. Once the HTML is sound, use CSS to make the page look the way you want it to look.

Cleaning up the HTML a bit more by moving attributes to CSS and adding CSS styles to customize the look of the page would be the next step in the development of the page.

attachment:
contact2-20150119a.html (6.6 KB)

Hi ron!

first sorry it take to me so long to answer

No, that is not correct. The errors being flagged are in the HTML. Fixing the HTML clears the errors. The CSS styles affect the look of the page and give you the appearance that you seek.

that is what i think it because the html but i was not sure

so i download the add on html validator on firefox and yes it is true there are more clear explanation there and i check up my file and it is said that there is not errors on the file

continue to the next message :point_right:

Hi again

first i change the file like you tell me to do is it right and i have question
on the sixth warnings did i have to change just this lines and what about that did i have to write their something see in the next line?

>   <input name="mail" type="text" id="mail2" **value=""** />

the code
contact2.html (6.6 KB)

thanks galia

You should change all similar <td> and <label> tags so they use the same pattern and put the <label> tag in the right column with the text. The value="" attribute, if populated, would display default text. It is not needed in those 4 <input> tags.

      <form action="mailto:fgm4488@gmail.com" method="post" enctype="text/plain" name="form1" id="form1">
        <table border="0">
          <tr>
            <td colspan="2">
              <table width="281" border="0">
                <tr>
                  <td width="107" align="left" valign="middle" class="heb"><label for="name">שם מלא:</label></td>
                  <td width="162" height="62"><input type="text" name="name" id="name" /></td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <table width="281" border="0">
                <tr>
                  <td width="107" align="left" valign="middle" class="heb"><label for="mail2">אימייל:</label></td>
                  <td width="161" height="50"><input name="mail" type="text" id="mail2" value="" /></td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <table width="281" border="0">
                <tr>
                  <td width="107" align="left" valign="middle" class="heb"><label for="phone2">טלפון:</label></td>
                  <td width="162" height="57"><input type="text" name="phone" id="phone2" /></td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <table width="281" border="0">
                <tr>
                  <td width="107" align="left" valign="middle" class="heb"><label for="Comments2">הערות:</label></td>
                  <td width="165" height="88"><textarea name="Comments" id="Comments2" cols="16" rows="4"></textarea></td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td width="107" align="center" valign="top"><input name="button2" type="submit" class="heb" id="button2" value="שלח" /></td>
            <td width="171" height="89" align="center" valign="top"><input name="Reset" type="reset" class="heb" id="button" value="נקה" /></td>
          </tr>
        </table>
      </form>

Those poor buttons.

Please be observant when you copy and paste code. Do not mess up the tags. The code that you posted has messed up the textarea row and buttons row. Please go back to 19a (post #446) for the proper HTML format.

Please remember that post #446 was about validation. There are more attribute changes in the HTML and some CSS styles could be added to tidy up the look of the form, particularly the buttons … again.

what is it?

Do you see something above copied from post #446 that includes “19a” ?

Does it look like the name of the HTML file that I sent?

ok thanks i get it is the name of the file that you sent in #446

1 Like

Ron what do you think about this file now do i have to change something more because the buttons do not look like in your file?

contact2.html (6.5 KB)

thank you galia

No, you do not have to change anything. Please throw this file away and start again with the code that you sent in post #441.

I took the code that you sent in post #441 and used it to talk about the HTML validator. You did a very nice job of reading the steps and applying them to your code. However, just in case you had a problem somewhere, I included contact2-20150119a.html in post #447 as an “answer sheet”, something to which you could compare your code.

In other words, nothing changed except the parts of the HTML that needed to change to make the HTML validate. And you have the before and after code in these posts.

You seem to be having a problem with the textarea row and the buttons row.

The latest code is in contact2-20150119a.html in post #447. That is the good code that you should have come up with. You asked a good question about the value="" attribute in the <input> tags and I told you that it is not needed in those 3 tags.

That is all that has been changed.

We subject of the conversation is “validation”, not buttons. And at the moment, the code that you are sending is screwed up. It should not be messed up because contact2-20150119a.html in post #447 is the answer sheet that shows how the buttons should be coded at this time. Remember, there were NO CSS changes. We were validating the code so only the necessary HTML was changed. That was the purpose of this exercise and the means to answer your question.

Have you validated the code that you just sent to me??? What does the validator say? Does it give you any clues where the problems might be? If not, throw the file that you just sent away and use the “answer sheet”, contact2-20150119a.html in post #447. Delete any value="" attributes in the upper 3 <input> tags and it will be up-to-date.

Then we can continue talking about validation and HTML and CSS.

There is lots to talk about before we get to the buttons.

first thank you that you think i did a good job on message #450

yes there are 3 errors
this is what the validator said:

Result: 3 errors / 0 warnings
line 151 column 16 - Error: end tag for element “td” which is not open
line 152 column 14 - Error: end tag for element “tr” which is not open
line 153 column 13 - Error: document type does not allow element “tr” here; assuming missing “table” start-tag

the answers that gave to me are:

End tag for element … which is not open
Cause:

The validator found an end tag for the above element, but that element is not currently open. This is often caused by:

a leftover end tag from an element that was removed during editing,
or by an implicitly closed element. If you have an error related to an element being used where it is not allowed, this error will disappear as soon as you fix the original problem. 

If this error occured in a script section of your document, you should probably read this FAQ entry.

The SGML parser reports this error for FORM, if the opening FORM’s action attribute is not enclosed in quotes, at least for HMTL Transitional, when the quotes are good practice, rather than necessary.
Example:
Good abc
Good abc

This can also be due to bad javascript:
Good document.write(“”);
Good document.write(“</h1>”);

In such case, you need to escape the </ with "".
Solution:

For a closing tag, remove the closing tag or add the missing opening tag before.
References:

 End tag for element ... which is not open

Cause:

The validator found an end tag for the above element, but that element is not currently open. This is often caused by:

a leftover end tag from an element that was removed during editing,
or by an implicitly closed element. If you have an error related to an element being used where it is not allowed, this error will disappear as soon as you fix the original problem. 

If this error occured in a script section of your document, you should probably read this FAQ entry.

The SGML parser reports this error for FORM, if the opening FORM’s action attribute is not enclosed in quotes, at least for HMTL Transitional, when the quotes are good practice, rather than necessary.

for the last error:

There is no help for this warning/error message.
Solution:

You are welcome to contribute. Use the Htmlpedia button above to edit the help. It will be included in next versions of the extension.
References:

so what do you think?

I think that you should use the code at the bottom of post #446, contact2-20150119a.html, and discard the file with the errors.

You made two simple mistakes, but do not understand how to copy and paste to fix those mistakes because you cannot seem to see the difference between a good file and the file with errors. Perhaps you have a problem with your vision and are unable to compare the files line-by-line. Or perhaps you do not understand what you are doing. Even though you insisted on using nested tables because that is what you “learned”, you don’t really understand them. It seems that what you “learned”, what you understand, is how to push buttons in Dreamweaver.

To compare the code for two web pages, open contact2-20150119a.html in a browser such as Firefox, then right-click and select “View Page Source”. Open your “broken” page in Dreamweaver Code View. You can switch between Firefox’s Source View and Dreamweaver’s Code View to compare the code and change Dreamweaver’s bad code so it is the same as Firefox’s good code. You should be able to copy from Firefox and Paste into Dreamweaver to fix the problems, or just type and change the code using Dreamweaver so all of the lines are the same as contact2-20150119a.html… or you could just delete your bad file and use contact2-20150119a.html.

Somehow, this simple demonstration/exercise intended to answer your question about the HTML validator has gone astray.

That’s what I think.

I’ve recently started using Meld and have found it invaluable for comparing files. It highlights differences and allows you to update from one to the other. I’m using it on Linux, but it’s also available for Windows.

2 Likes

Hi technobear!

thank you for suggesting this software i was download it to my computer but i do not understand what is the blue and the green sentences highlighted means is it error /warning what is the difference? and can you explain to me how to use with this software?

thanks galia

Did you have a look at the help section on their website?

http://meldmerge.org/help/

not on all the help but i can not see where the help talk about what color is means on sentence

From their help files:

On the left and right-hand sides of the window, there are two small vertical bars showing various coloured blocks. These bars are designed to give you an overview of all of the differences between your two files. Each coloured block represents a section that is inserted, deleted, changed or in conflict between your files, depending on the block’s colour used.

You should be able to see for yourself what each colour represents. Blue shows you sections which are different in the two files, and green marks something which is present in one file but not the other.

ok thank you but on the software itself i do not see what it is represented but thank you to tell me what is the blue and the green are and by the way i look again on the help files and find this:

Version control states
Each file or folder in a version control comparison has a state, obtained from the version control system itself. Meld maps these different states into a standard set of very similar concepts. As such, Meld might use slightly different names for states than your version control system does. The possible states are:
State
Appearance
Meaning
Same
Normal font
The file/folder is the same as the repository version.
Modified
Red and bold
This file is different to the repository version.
New
Green and bold
This file/folder is new, and is scheduled to be added to the repository.
Removed
Red bold text with a line through the middle
This file/folder existed, but is scheduled to be removed from the repository.
Conflict
Bright red bold text
When trying to merge with the repository, the differences between the local file and the repository could not be resolved, and the file is now in conflict with the repository contents
Missing
Blue bold text with a line through the middle
This file/folder should be present, but isn’t.
Ignored
Greyed out text
This file/folder has been explicitly ignored (e.g., by an entry in .gitignore) and is not being tracked by version control.
Non VC
Greyed out text
This file is not in the version control system; it is only in the local copy.
Error
Bright red with a yellow background and bold
The version control system has reported a problem with this file.

2 Likes

Hi ron!

first with the help of technobear i fix the errors so it is like yours see the code down
if it is good what to do now?

And by the way if you think that i don’t understand nested tables and do not know what is good code or i am just pushing buttons in dreamweaver so open my mind if you want don’t just say it but thanks for your honesty even i am do not like it.

the code

contact2.html (6.6 KB)

thanks galia

I do not have a copy of the notebook image for your latest code. Your new size is 608x460 and it has the name: 0337820501_2prevstill.jpg Could you please post a copy of that image in this topic?

Yes, it looks like the HTML is correctly formed now. Do you know how it came to be messed up? Do you know what happened that broke the tables in the row with the <textarea>?

A few messages ago you said that you had never seen one of your pages pass the HTML validator test before. Now you can say that you have written one that does! That’s progress.

I assume that you have tested the page. What do you think you should do next?