Need help with validation results of w3c on css file

Discussion in 'HTML & Website Design' started by renet, Feb 18, 2010.

0
  1. #1
    w3c gives this 13 errors. It says that #000000; is not a color.
    you'll notice a white space on the right side. That's supposed to be there for now. Later we will fill that with an element with text.

    Here's another thing. in the elements where there are images the background is supposed to be black but the black does not appear.

    Does anyone have ideas about the above mentioned questions and is there anything else you would like to recommend or suggest I correct.

    Thanks for all your help!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.example.net/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.example.net/1999/xhtml">
    <html><head>
    <style type="text/css">
    /* CSS Document */
    body {
    background: #ffffff;
    font-size:100%;
    margin: 20px 100px 100px 100px;
    font-color: #000000;
    }
    h1 {
    text-align:center;
    font-size:2.25em;
    }
    h2 {
    color:#000000;
    text-align:center;
    font-size:1.875em;
    }
    P {
    font-family:"arial";
    text-align:center;
    font-size:.875em;
    font-color: #000000;
    }

    #img1
    {
    margin: 5px;
    border: 3px solid #000000;
    height:197px
    background-color: #000000;
    width: 538px;
    align: left;
    }
    #img2
    {
    margin: 0px;
    border: 3px solid #000000;
    height:197px
    background-color: black;
    width: 800px;
    align: left;

    }
    #part1
    {
    font-family:"Times New Roman",Georgia,Serif;
    font-size: 2em;
    font-weight: bold;
    border: 3px solid black;
    align: center;
    border-collapse:collapse;
    width: 800px;
    height: 60px;
    text-align: center;
    padding: 18px 10px 3px 10px;
    background-color: #ccc;
    }

    #part2
    {
    text-align: center;
    }

    #part3
    {
    font-family: "arial", sans-serif;
    align: right;
    border: 3px solid #000000;
    text-align: center;
    background-color: #FFEBCD;
    width: 256px;
    height: 202px;
    margin: -236px 0px 0px 547px;
    padding: 13px 10px 10px 10px;

    }
    #part4
    {
    font-family: "arial", sans-serif;
    align: left;
    border: 2px solid #000000;
    text-align: center;
    background-color: #FFFFFF;
    width: 528px;
    height: 285px;
    margin: 0px 0px 0px 0px;
    padding: 2px 10px 10px 10px;
    margin: 3px 0px 0px 0px;
    font-weight: bold;
    }
    #part5
    {
    font-family:"Times New Roman",Georgia,Serif;
    align: left;
    border: 2px solid #000000;
    text-align: center;
    background-color: #FFfff;
    width: 256px;
    height: 304px;
    margin: -1px 0px 0px 0px;
    padding: 13px 10px 10px 10px;

    }
    #part6
    {
    font-family:"Times New Roman",Georgia,Serif;
    align: right;
    font-weight: bold;
    border: 2px solid #000000;
    text-align: center;
    background-color: #FFEBCD;
    width: 251px;
    height: 237px;
    margin: -331px 0px 0px 278px;
    padding: 80px 10px 10px 10px;

    }
    #part7
    {
    font-family:"Times New Roman",Georgia,Serif;
    align: right;
    font-weight: bold;
    border: 2px solid #000000;
    text-align: center;
    background-color: #FFffff;
    width: 253px;
    height: 538px;
    margin: -775px 0px 0px 552px;
    padding: 80px 10px 10px 10px;

    }





    </style></head><body>

    <div id="part1">Most Competitive Townhouse In BattleGround</div>

    <div id="part2">Call: | Email: | <a href="http://example.net">Click for More Info</a></div>

    <div id="img1"><img src="http://example.net" hspace="1px" width="264" height="225"><img src="example.net" hspace="4px" width="264" height="225"></a></div>

    <div id="part3">
    <span style="font-size: 1.25em;">NW Foreclosure Network<br>
    <a href="http://example.net/sp/reo-buyer">Reward Card</a></span><br>
    Up to 50% discounts on<br>
    Inspection, appraisal,<br>
    home improvement and more<p>
    <span style="font-size: 1.25em;">This Week Discount<br>
    Free Inspection<br>
    Pillar To Post</p></span>
    </div>

    <div id="part2">Call: 360-773-1722 | Email: example.net | <a href="example.net">Click for More Info</a></div>

    <div id="part4">
    <span style="font-size: 1.40em;"><p>3 bed, 2.5 bath, 2-car garage – ONLY $139,900<br>
    Better than move-in ready condition<br>
    100% Financing</span></p>
    <span align-text="left" style="font-size: 1.15em;"><p>Not a short sale. Approved USDA 100% financing. Priced to sell fast therefore positioned as the cheapest townhouse in Battle Ground and it is in better than move-in ready condition. New carpet & stainless steel appliances, Cozy fireplace. Convenient location. Payments are way less than what it can rent for. Don't miss your $8,000 tax credit before it expires.</p>

    <p>For more info call 360-773-1722 or e-mail example.net</p>
    </span>
    </div>



    <div id="part5">
    <span style="font-size: 1em;"><b>
    Free Mortgage Book</span>
    <img src="http://example.net"></a><br>
    <span style="font-size: 1.35em:">"Everything You Ever Wanted To Know About Home Mortgages"</b></span><p>
    <span align="left">No Obligation Mortgage Pre-Approval<br>
    With a "Select" Local Lender </span>
    </div>

    <div id="part6">
    <span style="font-size: 1.75em;">Bank Owned<br>
    Inventory List</span><br>
    <span style="font-size: 1em;">Feb. 15-22<br>
    Acreage, Condo, Land, Multi-<br>Family, Luxury</span>
    </div>


    <div id="img2"><img src="http://example.net" hspace="6px" width="270" height="225"><img src="example.net" hspace="2px" width="264" height="225"><img src="example.net" hspace="3" width="250" height="225"></a></div>











    </body>
     
    renet, Feb 18, 2010 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    It isn't saying it's not a color, it's saying there is no such thing as 'font-color'. Just change it to 'color'.
     
    drhowarddrfine, Feb 18, 2010 IP
  3. renet

    renet Greenhorn

    Messages:
    54
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #3
    Okay, Now when it's validated there are 2 image errors left.

    Am I better putting image height and weight in the css and take it out of the img src section. Or visa versa?

    in either case I did not understand what validate meads about the semi colon needing to be before (height).

    Also, still not seeing black background color show up behind and in between images.

    Also, when correcting some of the css now 1 image does not display where there are 2 side by side And at the bottom there are 3 side by side and but one kicks down to lower line.

    thanks
     
    renet, Feb 18, 2010 IP
  4. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #4
    Always.
    Notice all your properties in CSS end with semi-colon but not so after 'height'.
     
    drhowarddrfine, Feb 18, 2010 IP
  5. renet

    renet Greenhorn

    Messages:
    54
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #5
    On this page you will notice a section about 1/3 way down page that displays
    2 images side by side. The background is black in order to accomplish a black space between the two images and on either side of the images. Next to these two images is an element with text.

    the way it is currently configured the 2 pictures are working and display properly (other than I need to size them correctly) and the element with text displays but when I try to add width to the element it does not get any wider. The idea is this element is about 1/3 of the page or of the 800px total width.

    Not sure what is wrong with the code that is preventing it to take up the proper width in that space.

    All help appreciated.

    (don't be too concerned about the code below these two images as we still are fixing. The main thing is getting #boxholder, #part3 and #part3a cleaned up)


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.example.net/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.example.net/1999/xhtml">
    <html><head>
    <style type="text/css">
    /* CSS Document */
    body {
    background: #ffffff;
    font-size:100%;
    margin: 20px 100px 100px 100px;
    color: #000000;
    }
    h1 {
    text-align:center;
    font-size:2.25em;
    }
    h2 {
    color:#000000;
    text-align:center;
    font-size:1.875em;
    }
    P {
    font-family:"arial";
    text-align:center;
    font-size:.875em;
    color: #000000;
    }

    #part1
    {
    font-family:"Times New Roman",Georgia,Serif;
    font-size: 2em;
    font-weight: bold;
    border: 3px solid black;
    border-collapse:collapse;
    width: 800px;
    height: 60px;
    text-align: center;
    padding: 18px 10px 3px 10px;
    background-color: #ccc;
    }

    #part2
    {
    text-align: center;
    }
    #part3
    {
    border: 3px solid #000000;
    height:202px;
    background-color: #000000;
    width: 527px;
    padding: 2px;
    float: left;
    }
    #boxholder {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    background-color: red;
    }
    #part3a {
    background-color: #FFEBCD;
    float: left;
    margin-left: 0px;
    margin-right: 0px;
    height: 202px;
    width: 250;
    border: 3px solid #000000;
    }
    .clearBoth {
    clear:both;
    }

    #part5
    {
    font-family: "arial", sans-serif;
    border: 2px solid #000000;
    text-align: center;
    background-color: #FFFFFF;
    width: 528px;
    height: 285px;
    margin: 0px 0px 0px 0px;
    padding: 2px 10px 10px 10px;
    margin: 20px 0px 0px 0px;
    font-weight: bold;
    }
    #part6
    {
    font-family:"Times New Roman",Georgia,Serif;
    border: 2px solid #000000;
    text-align: center;
    background-color: #FFF;
    width: 256px;
    height: 304px;
    margin: 20px 0px 0px 0px;
    padding: 13px 10px 10px 10px;

    }
    #part6
    {
    font-family:"Times New Roman",Georgia,Serif;

    font-weight: bold;
    border: 2px solid #000000;
    text-align: center;
    background-color: #FFEBCD;
    width: 251px;
    height: 237px;
    margin: 20px 0px 0px 278px;
    padding: 80px 10px 10px 10px;
    }
    #part7
    {
    font-family:"Times New Roman",Georgia,Serif;
    font-weight: bold;
    border: 2px solid #000000;
    text-align: center;
    background-color: #FFF;
    width: 253px;
    height: 538px;
    margin: 20px 0px 0px 552px;
    padding: 80px 10px 10px 10px;
    }
    #img2
    {
    border: 3px solid #000000;
    margin: 0px;
    border: 3px solid #000000;
    height:197px;
    background-color: #000000;


    }





    </style></head><body>

    <div id="part1">Most Competitive Townhouse In BattleGround</div>

    <div id="part2">Call: 360-773-1722 | Email: f| <a href="http://example.net">Click for More Info</a></div>

    <div id="boxholder">
    <div id="part3"><img src="http://example.net" hspace="1px" height="200" width="225"><img src="http://example.net" hspace="4px" height="200" width="225"></a>
    </div>
    <div id="part3a">
    <span style="font-size: 1.25em;">NW Foreclosure Network<br>
    <a href="http://example.net">Reward Card</a></span><br>
    Up to 50% discounts on<br>
    Inspection, appraisal,<br>
    home improvement and more<p>
    <span style="font-size: 1.25em;">This Week Discount<br>
    Free Inspection<br>
    Pillar To Post</p></span>
    </div>
    <br class="clearBoth" />
    </div>

    <div id="part6">
    <span style="font-size: 1em;"><b>
    Free Mortgage Book</span>
    <img src="http://example.net"></a><br>
    <span style="font-size: 1.35em:">"Everything You Ever Wanted To Know About Home Mortgages"</b></span><p>
    <span align="left">No Obligation Mortgage Pre-Approval<br>
    With a "Select" Local Lender </span>
    </div>


    <div id="part2">Call: 360-773-1722 | Email: | <a href="http://example.net">Click for More Info</a></div>

    <div id="part5">
    <span style="font-size: 1.40em;"><p>3 bed, 2.5 bath, 2-car garage &#8211; ONLY $139,900<br>
    Better than move-in ready condition<br>
    100% Financing</span></p>
    <span align-text="left" style="font-size: 1.15em;"><p>Not a short sale. Approved USDA 100% financing. Priced to sell fast therefore positioned as the cheapest townhouse in Battle Ground and it is in better than move-in ready condition. New carpet & stainless steel appliances, Cozy fireplace. Convenient location. Payments are way less than what it can rent for. Don't miss your $8,000 tax credit before it expires.</p>

    <p>For more info call or e-mail </p>
    </span>
    </div>


    <div id="part7">
    <span style="font-size: 1.75em;">Bank Owned<br>
    Inventory List</span><br>
    <span style="font-size: 1em;">Feb. 15-22<br>
    Acreage, Condo, Land, Multi-<br>Family, Luxury</span>
    </div>


    <div id="part8"><img src="http://example.net" hspace="6px" width="270" height="225"><img src="http://example.net" hspace="2px" width="264" height="225"><img src="http://example.net" hspace="3" width="250" height="225"></a></div>











    </body>
     
    renet, Feb 18, 2010 IP