SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2005
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    html->css validation problems

    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

  2. #2
    SitePoint Addict
    Join Date
    Jun 2003
    Location
    Barrie, Ontario, Canada
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of declaring the body margins in the html, do it in the css with the following:

    Code:
    body { margin:0px; }
    Once you add that to your css, you will be able to take out from your html:

    Code:
    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:

    Code:
    <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:

    Code:
    <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.

  3. #3
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    body {
        margin:0;
        padding:0;
    }
    Same thing with line 126, this is what the validator is talking about (it actually starts in line 116):
    Code:
                        <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>.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    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.
    Code:
    <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.
    Code:
         <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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •