SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Validation Error - Need Help With Placing Elements

    Ok, I want this to happen in my document:

    Code:
    <pre><code><div class="code">
    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;Faye's First Web Page&lt;/title&gt;
    
    &lt;/head&gt;
    
    &lt;body&gt;
    
    &lt;h1&gt;Faye's First Web Page&lt;/h1&gt;
    
    &lt;p&gt;Hello, I am Faye! This is my First Web Page. Hehe =D&lt;/p&gt;
    
    &lt;/body&gt;
    &lt;/html&gt;
    </div></code></pre>
    However, I'm having trouble validating this part of the document so the whole web page validates as XHTML 1.0 Strict.

    Here's what I get from W3:

    Line 47, Column 28: document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag.
    <pre><code><div class="code">
    The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

    One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
    I've tried using others, as you see in that example, such as putting them different things infront of the tags and also switching them three tags around but it still doesn't work for me so I must be doing something wrong, and I bet it's something simple too from the last time I had a problem like this.

    What do I need to do to that markup to have it validate in XHTML 1.0 Strict?

    A really really prompt reply would be great!

    Thanks,

    AndrewCooper

  2. #2
    From space with love silver trophy
    SpacePhoenix's Avatar
    Join Date
    May 2007
    Location
    Poole, UK
    Posts
    4,994
    Mentioned
    100 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AndrewCooper View Post
    Ok, I want this to happen in my document:

    Code:
    <pre><code><div class="code">
    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;Faye's First Web Page&lt;/title&gt;
    
    &lt;/head&gt;
    
    &lt;body&gt;
    
    &lt;h1&gt;Faye's First Web Page&lt;/h1&gt;
    
    &lt;p&gt;Hello, I am Faye! This is my First Web Page. Hehe =D&lt;/p&gt;
    
    &lt;/body&gt;
    &lt;/html&gt;
    </div></code></pre>
    However, I'm having trouble validating this part of the document so the whole web page validates as XHTML 1.0 Strict.

    Here's what I get from W3:



    I've tried using others, as you see in that example, such as putting them different things infront of the tags and also switching them three tags around but it still doesn't work for me so I must be doing something wrong, and I bet it's something simple too from the last time I had a problem like this.

    What do I need to do to that markup to have it validate in XHTML 1.0 Strict?

    A really really prompt reply would be great!

    Thanks,

    AndrewCooper
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Faye's First Web Page</title>
    </head>
    
    <body>
        <h1>Faye's First Web Page</h1>
        <div class="code">
            <p>
                <code>
                    Hello, I am Faye! This is my First Web Page. Hehe =D
                </code>
            </p>
        </div>
    </body>
    </html>

    • The doctype needs to come first
    • <code><div class="code"> goes in the body section
    Community Team Advisor
    Forum Guidelines: Posting FAQ Signatures FAQ Self Promotion FAQ
    Help the Mods: What's Fluff? Report Fluff/Spam to a Moderator

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,784
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    code is an inline element and so cannot contain a block element such as div.

    Try it this way around which puts the two block level elements outside of the inline one:

    Code:
    <pre><div class="code"><code>
    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;Faye's First Web Page&lt;/title&gt;
    
    &lt;/head&gt;
    
    &lt;body&gt;
    
    &lt;h1&gt;Faye's First Web Page&lt;/h1&gt;
    
    &lt;p&gt;Hello, I am Faye! This is my First Web Page. Hehe =D&lt;/p&gt;
    
    &lt;/body&gt;
    &lt;/html&gt;
    </code></div></pre>
    If it still doesn't like that then wrap the div around the pre
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    SpacePhoenix, I think you misunderstood what I was asking for.

    felgall, that code doesn't work either, I've also tried that too including mixing them around in other variations, but it still doesn't work =[ help please someone.

    AndrewCooper

  5. #5
    Motivated Procrastinator seriocomic's Avatar
    Join Date
    Jan 2003
    Location
    Outside the bubble
    Posts
    1,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure why you have either the <div> or the <code> tags there...?

    Removing them will validate.

    You can apply the style to the <pre> tag (either as a direct style in css, or by appending the class attribute e.g. <pre class="code">.

  6. #6
    Motivated Procrastinator seriocomic's Avatar
    Join Date
    Jan 2003
    Location
    Outside the bubble
    Posts
    1,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To clarify:
    Code:
    <pre>
    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;Faye's First Web Page&lt;/title&gt;
    
    &lt;/head&gt;
    
    &lt;body&gt;
    
    &lt;h1&gt;Faye's First Web Page&lt;/h1&gt;
    
    &lt;p&gt;Hello, I am Faye! This is my First Web Page. Hehe =D&lt;/p&gt;
    
    &lt;/body&gt;
    &lt;/html&gt;
    </pre>

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The pre element type is block-level, but only allows inline children (and not all inline element types, either). The code element type is inline and only allows inline children.

    Thus you need to put the div outermost (if you need it at all).
    Code HTML4Strict:
    <div class="code"><pre><code>
      ...
    </code></pre></div>

    @seriocomic: The code element is semantically correct in this case, marking up the content as computer code. The pre element only states that the content is pre-formatted, not that it's code.
    Birnam wood is come to Dunsinane

  8. #8
    From space with love silver trophy
    SpacePhoenix's Avatar
    Join Date
    May 2007
    Location
    Poole, UK
    Posts
    4,994
    Mentioned
    100 Post(s)
    Tagged
    0 Thread(s)
    OP, is this what your looking for:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Faye's First Web Page</title>
    
    </head>
    
    <body>
    
    
    <div class="code"><pre><code>
    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;Faye's First Web Page&lt;/title&gt;
    
    &lt;/head&gt;
    
    &lt;body&gt;
    
    &lt;h1&gt;Faye's First Web Page&lt;/h1&gt;
    
    &lt;p&gt;Hello, I am Faye! This is my First Web Page. Hehe =D&lt;/p&gt;
    
    &lt;/body&gt;
    &lt;/html&gt;
    </code></pre></div>
    
    </body>
    </html>
    The main problem was that the validator could not find a doctype at the top and so didn't know that it was to be trying to validate as XHTML 1.0 Strict. This part:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Page Title Goes Here</title>
    is always required for a page to validate and it must have at the end:

    HTML Code:
    </body>
    </html>
    Community Team Advisor
    Forum Guidelines: Posting FAQ Signatures FAQ Self Promotion FAQ
    Help the Mods: What's Fluff? Report Fluff/Spam to a Moderator

  9. #9
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    HTML4Strict Code:
    <div class="code"><pre><code>
    ...
    </code></pre></div>
    That worked perfectly! =D Thanks! It validates as XHTML 1.0 Strict now!

    @seriocomic: The code element is semantically correct in this case, marking up the content as computer code. The pre element only states that the content is pre-formatted, not that it's code.
    Again, you're correct! The code sample I gave wasn't the actual code of the document I was making it for, the actual code sample I gave was the fragment of CONTENT that I wanted to be sorted out to make the page validate. The code sample I gave, was actually a full code EXAMPLE for a tutorial I'm making for someone you see.

    @SpacePhoenix: Thanks for clarifying all what you said, but I wasn't looking for that, I was looking for what Autistic did for me. I knew about the DOC-TYPE, that's at the top of my document web page already, the code sample I gave was just an actual code example to be placed in my document web page for the viewer.

    Thank you all, again! I knew I should have tried that combination Autistic! Heh, silly me! Too much Wine! -Blush- Hehe lol.

    Merry Christmas to you all!

    AndrewCooper


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
  •