1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Done... Time to validate!

Discussion in 'CSS' started by safe_reader, Aug 3, 2006.

0
  1. #1
    Ok, after spending many, many hours this week trying to get more familiar with CSS and odds & ends between browsers, I think I have figured out the basics. My CSS validates, however I would like to make sure my html also validates, to keep up with future compliancy.

    I've tried to fix some things, like missing ALT text, but I'm somewhat stuck now. Note::

    Error Line 5 column 73: character data is not allowed here.
    ...e" content="text/html; charset=iso-8859-1" />

    Happens when I try to validate my test page at:
    http://www.highpoly3d.com/tutorials/wings3d/


    I'm not sure why there is a problem, since this was auto-inserted by DW and I didn't want to edit it incase I mess up anything.

    The section of code looks like this..
    <head>
<title>Wings 3D Tutorials</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/tutorials/wings3d/Tutorials.css" rel="stylesheet" type="text/css" />
    Code (markup):
    What is wrong here?
     
    safe_reader, Aug 3, 2006 IP
  2. the_pm

    the_pm Peon

    Messages:
    332
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #2
    To what standard are you attempting to validate (HTML/XHTML, Transitional/Strict/1.1) and does your document have an appropriate doctype?
     
    the_pm, Aug 3, 2006 IP
  3. safe_reader

    safe_reader Peon

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I'm trying to do strict, which is defined in the top of the document if you view source. I even went and picked up a book today on xhtml to read to see what else I may have been missed. This is going to take many, many hours.
     
    safe_reader, Aug 3, 2006 IP
  4. Gordaen

    Gordaen Peon

    Messages:
    277
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Do you mean XHTML1.0 Strict? Because your doctype is for HTML 4.01
     
    Gordaen, Aug 3, 2006 IP
  5. the_pm

    the_pm Peon

    Messages:
    332
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Ah, I didn't understand the unlinked link was the actual page in question. I was just looking at the markup you posted.

    As Gordaen pointed out, your doctype is for HTML 4.01 Strict, but your markup is formed to XHTML specifications, at least this is the case with the self-closing tags. This would cause validation errors. There's absolutely nothing wrong with using either HTML 4.01 Strict or XHTML 1.0 Strict (either one Transitional is a significantly inferior choice). Just make sure your markup reflects that particular standard, that's all :)
     
    the_pm, Aug 3, 2006 IP
  6. safe_reader

    safe_reader Peon

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Ok well I did more reading in my xhtml book. I edited the dtd so it's xhtml 1, and put my xml line at the very top like all these examples showed. But it seems I am still just going backwards. Now when I validate I get both a:

    This is what I changed/added, following the book.

    <?xml version="1.0"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtm11/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">


    But this just gives the page a parse,error, and the validation never can even find the doctype? Arggggh. If the books aren't even right, what help is there for me?
     
    safe_reader, Aug 4, 2006 IP
  7. safe_reader

    safe_reader Peon

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Ok I found part of the problem. If the extension is PhP... I run into mass problems with this. But if it's just HTML, then things are fine. Ughhhh.. Now does this mean my other .php files can never be validated!? For now I renamed the php into .htm but that means none of my php code will ever be able to work :(
     
    safe_reader, Aug 4, 2006 IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #8
    Remove the xml declaration. It does not apply when serving as text/html, and it makes IE even more stupid.

    Whether there's a .php extension or .html makes no difference to validation. If you have problems seemingly due to the extension, you don't. It's something else. In this case, with the .php ext., the server is trying to parse that xml prolog as php and failing; thus the error.

    If you wanted to keep the prolog in a PHP page (and you don't), you'd have to either change the PHP configuration to require <?php instead of <?, or you'd use PHP syntax to print the prolog. 
    
<? print '<?xml version="1.0"?>'; ?>
    Code (markup):
    cheers,

    gary
     
    kk5st, Aug 4, 2006 IP
  9. safe_reader

    safe_reader Peon

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Oh boy, seems reading books don't help me. So I went and strippedout all the xml lines this book is telling me I SHOULD add as the first line.

    Now back to the xhtml verification part. I guess I don't even know the basics despite I used to code html many years ago. This following line works fine in the browsers::

    <p><a href="http://www.highpoly3d.com/tutorials/wings3d/"><img src="/highpoly_3d_logo_white.png" alt="Highpoly 3D Logo" width="200" height="91" /></a><a href="http://www.wings3d.com/" ><img src="/tutorials/wings3d/top_logo.gif" alt="Wings3D" width="349" height="55"></a></p>

    Now, when validating I get the negative responses::

    Error Line 48 column 269: end tag for "img" omitted, but OMITTAG NO was specified.
    ..."Wings3D" width="349" height="55"></a></p>
    You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

    ✉

    Info Line 48 column 185: start tag was here.
    ...a><a href="http://www.wings3d.com/" ><img src="/tutorials/wings3d/top_logo.gi


    Since it all works, I'm not sure what to remove, add, or what to get it compliant. Spent too many hours tonight not getting anywhere, I'll re-read my xhtml chapters, but i've somewhat lost faith in this book.
     
    safe_reader, Aug 4, 2006 IP
  10. the_pm

    the_pm Peon

    Messages:
    332
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Well, it seems as if you flipped two different switches instead of just one.

    Your doctype was for regular HTML, and your markup was for XHTML. You changed your doctype to be for XHTML and you took out your self-closing tags, and made your markup HTML.

    This time, decide if you truly want HTML or XHTML (by the looks of things, it make no difference whatsoever - either choice is equally fine), and stick with that choice :)

    I would say to revert back to your original doctype and leave your markup alone. That should now do the trick.
     
    the_pm, Aug 4, 2006 IP
  11. safe_reader

    safe_reader Peon

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Oh boy now I just feel.... confused :confused:....

    so xhtml is html, and xhtml is not html... Hmmmm.

    No matter what I do, I am doing something wrong.

    Let me get soemthign that I THINK is right...

    Xhtml is suppose to be the wave of the future, am I right or wrong? And if it is, then I should stick with xhtml right?

    Now... my markup is html, which needs to be changed to xhtml? ARgggh

    So self closting tags.. xhtml only uses self-closing? I am going to re-read these chapters for a 3'rd time now!
     
    safe_reader, Aug 4, 2006 IP
  12. safe_reader

    safe_reader Peon

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Well, the episode continues... I re-read the chapter on images & links, so I changed that line a little bit to this::

    <body>
    <a href="http://www.highpoly3d.com/tutorials/wings3d/"><img src="/highpoly_3d_logo_white.png" alt="Highpoly 3D Logo" width="200" height="91" /></a>
    <a href="http://www.wings3d.com/"><img src="/tutorials/wings3d/top_logo.gif" alt="Wings3D" width="349" height="55" /></a>
    <p>&nbsp;</p>


    But now, I get the current validation error::
    Error Line 48 column 54: document type does not allow element "a" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.
    ...ww.highpoly3d.com/tutorials/wings3d/"><img src="/highpoly_3d_logo_white.png"
     
    safe_reader, Aug 4, 2006 IP
  13. the_pm

    the_pm Peon

    Messages:
    332
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #13
    XHTML is a good technology for sites that will need to be parsed as XML in the future. It's only useful if this applies to your project. It doesn't replace anything, and there's nothing much futuristic about it. I presonally prefer it, but only because it forces me to code will well-formed markup, and I have projects where XML will be a consideration down the road. From what I can see, in your case, there is no advantage to using it whatsoever.

    Correct.

    In strict markup, you are not allowed to have an inline object on a page without having it in a container. Inline objects include things like text, images and links. Block-level objects include things like paragraphs, divs and lists.

    Think of an inline object as a meatball, and think of block-level objects as Tupperware. You should always put your meatball in Tupperware before putting it somewhere (never allow an inline element to exist without a block-level object containing it). You can place one piece of Tupperware inside another piece (you can nest most block-level elements inside each other - there are exceptions). But it would be silly to place a piece of Tupperware inside a meatball (you cannot nest a block-level element inside an inline element).

    In your case, with this error, you violated the first premise. You tried to place your meatball on the screen without putting it in a container first (<body> is not considered to be a container). That's why you got back that list of elements, because the validator is saying one of those needs to be the container that holds your link.
     
    the_pm, Aug 4, 2006 IP
  14. safe_reader

    safe_reader Peon

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Ok, I finally found a solution. If for some reason I put a paragraph over each image, then it validates. Unfortunately, this messes up my whole layout, because now my images are not horizontal now. ARggghh But that's the best I can do. Maybe someone else can learn from this.
     
    safe_reader, Aug 4, 2006 IP
  15. safe_reader

    safe_reader Peon

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Ok thanks PM, I see you posted just as I posted my last message. It somewhat makes sense now.
     
    safe_reader, Aug 4, 2006 IP
  16. the_pm

    the_pm Peon

    Messages:
    332
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Put all of your images into one container, instead of wrapping each one in a container. Then they'll be horizontal again :)
     
    the_pm, Aug 4, 2006 IP
  17. Gordaen

    Gordaen Peon

    Messages:
    277
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #17
    You shouldn't do: <p>&nbsp;</p>

    You can put your code with the images/links into a division and that will solve many of your problems. Ooh, looks like your markup is valid now :)
     
    Gordaen, Aug 4, 2006 IP