html->css validation problems

[jhonOO]

Hi,

Any help would be appreciated...

I would like to use css rather than html to align a page pelment and I have no idea how to do it. The site validator provided the following:

http://validator.w3.org/check?uri=h...www.at-roys.com

line 23 is causing a problem. this line controls the placement of the date on my page ( http://www.at-roys.com ). It works in ie and isn't too bad in firefox.

When I remove the bad code then the date and flash logo things move around a lot.

The validator suggests using css instead of the bad code but I haven't a clue how to do that and my css failed validation badly already!

Please help!!!

Any idea how I can fix this???

Also, the final validation problem in line 126...

I don't get it. There is no </p> in line 126 and yet it says that is causing a problem...

I would really appreciate your help.

Thanks,
jhon

[hockeykid]

Instead of declaring the body margins in the html, do it in the css with the following:

body { margin:0px; }

Once you add that to your css, you will be able to take out from your html:

leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0"

And there is a </p> on line 126. To put the error in context:

<p><div class="footer"> <a href="http://www.at-roys.com">Main</a> - <a href="http://www.at-roys.com/texindex.html">Main 
  (Text)</a> - <a href="http://www.at-roys.com/arsm.html">Site Map</a> - <a href="http://www.at-roys.com/arservices.html">Services</a> 
  - <a href="http://www.at-roys.com/arresources.htm">Resources</a> - <a href="http://www.at-roys.com/arquotereq.html">Quote</a> 
  - <a href="http://www.at-roys.com/contact.html">Contact</a> - <a href="http://www.at-roys.com/arabout.html">About</a> 
  - <a href="http://www.at-roys.com/arfaq-home.html">FAQ</a> - MT / MAT -<a href="http://www.at-roys.com/arwebprivacy.html">Privacy<BR>

  </a> </div>
<BR>
                      <br>
                      <br>
                      <br>
                    </p>

Just move that </p> up to make sure it is inside of the div, like so:

<p><div class="footer"> <a href="http://www.at-roys.com">Main</a> - <a href="http://www.at-roys.com/texindex.html">Main 
  (Text)</a> - <a href="http://www.at-roys.com/arsm.html">Site Map</a> - <a href="http://www.at-roys.com/arservices.html">Services</a> 
  - <a href="http://www.at-roys.com/arresources.htm">Resources</a> - <a href="http://www.at-roys.com/arquotereq.html">Quote</a> 
  - <a href="http://www.at-roys.com/contact.html">Contact</a> - <a href="http://www.at-roys.com/arabout.html">About</a> 
  - <a href="http://www.at-roys.com/arfaq-home.html">FAQ</a> - MT / MAT -<a href="http://www.at-roys.com/arwebprivacy.html">Privacy<BR>

  </a></p> </div>
<BR>
                      <br>
                      <br>
                      <br>

Hopefully this helps.

[c2uk]

Oh boy, sorry to say, (and really no offence everyone starts at the beginning, also good that you want to use css!) but your code looks like a total mess. You are not only mixing css styles and html formats but also lower-case and higher case...

You really should have a look at something like this: http://www.htmldog.com/

Moving on to your actual problems:

Line 23 is the body tag, nothing to do with the date of your page or anything. Browse to your site and open the Source Code Viewer (Recommend to use Firefox in combination with the Extension "HTML Validator"), and go to line 23, then you see which line the validator means.

In the body tag, you are using leftmargin, topmargin,... use instead css:

body {
    margin:0;
    padding:0;
}

Same thing with line 126, this is what the validator is talking about (it actually starts in line 116):

                    <p><div class="footer"> <a href="http://www.at-roys.com">Main</a> - <a href="http://www.at-roys.com/texindex.html">Main 
  (Text)</a> - <a href="http://www.at-roys.com/arsm.html">Site Map</a> - <a href="http://www.at-roys.com/arservices.html">Services</a> 
  - <a href="http://www.at-roys.com/arresources.htm">Resources</a> - <a href="http://www.at-roys.com/arquotereq.html">Quote</a> 
  - <a href="http://www.at-roys.com/contact.html">Contact</a> - <a href="http://www.at-roys.com/arabout.html">About</a> 
  - <a href="http://www.at-roys.com/arfaq-home.html">FAQ</a> - MT / MAT -<a href="http://www.at-roys.com/arwebprivacy.html">Privacy<BR>

  </a> </div>
<BR>
                      <br>
                      <br>
                      <br>
                    </p>

You have enclosed a <div> within a <p>.

[Paul O'B]

Hi,

The validator is pointing to line 23 which is your body tag and nothing to do with your date. The offending properties are the deprecated attributes rightmargin topmargin etc..

Take these out and use css as the validator suggests.

html,body{
margin:0;
padding:0;}
body{
background:#fff url(http://www.at-roys.com/pics/background-main.gif) no-repeat left top;
color:000;
}
a:link{color:#0033CC}
a:visited{color:#0033CC}
a:hover{color:#0033CC}
a:active{color:#0033CC}

And then the body tag is just body.

<body>

The error at line 126 is because you have nested a blocklevel element (div) inside a paragraph which is not allowed.

Here are the offending items highlighted.

     <p>
	 <div class="footer"> <a href="<A href="http://www.at-roys.com">Main</a">http://www.at-roys.com">Main</a> 
	   - <a href="<A href="http://www.at-roys.com/texindex.html">Main">http://www.at-roys.com/texindex.html">Main (Text)</a> 
	   - <a href="<A href="http://www.at-roys.com/arsm.html">Site">http://www.at-roys.com/arsm.html">Site Map</a> 
	   - <a href="<A href="http://www.at-roys.com/arservices.html">Services</a">http://www.at-roys.com/arservices.html">Services</a> 
	   - <a href="<A href="http://www.at-roys.com/arresources.htm">Resources</a">http://www.at-roys.com/arresources.htm">Resources</a> 
	   - <a href="<A href="http://www.at-roys.com/arquotereq.html">Quote</a">http://www.at-roys.com/arquotereq.html">Quote</a> 
	   - <a href="<A href="http://www.at-roys.com/contact.html">Contact</a">http://www.at-roys.com/contact.html">Contact</a> 
	   - <a href="<A href="http://www.at-roys.com/arabout.html">About</a">http://www.at-roys.com/arabout.html">About</a> 
	   - <a href="<A href="http://www.at-roys.com/arfaq-home.html">FAQ</a">http://www.at-roys.com/arfaq-home.html">FAQ</a> 
	   - MT / MAT -<a href="<A href="http://www.at-roys.com/arwebprivacy.html">Privacy<BR">http://www.at-roys.com/arwebprivacy.html">Privacy<BR>
	   </a> </div>
	 <BR> <br> <br> <br> </p> </td>

Just take them both out and your page will validate

You shouldn't need to use multiple breaks to make space but rather apply margins (or padding where necesssary) from the css.

Hope that helps.