SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Enthusiast Stewarty-Boy's Avatar
    Join Date
    Dec 2003
    Location
    Dundee, Scotland.
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Form Validation ???

    Hi Folks.

    I was wondering if anyone could help me? I'm trying to get my pages validated to XHTML 1.1 and can't get an email form validated. This is what I get.
    Line 204, column 57: document type does not allow element "input" here; missing one of "a", "span", "em", "strong", "dfn", "code", "samp", "kbd", "var", "cite", "abbr", "acronym", "q", "tt", "i", "b", "bdo" start-tag

    <pre> Name: <input type="text" name="name" size="30" /></pre>
    I also get this element problem with the "textarea" element too.

    My Code is:
    <div id="middlecolumn">

    <br /> <br />

    <h3> Please fill in your details below and we will reply to you as soon as possible! </h3>
    <br />
    <form method="post" action="mailer">
    <pre> Name: <input type="text" name="name" size="30" /></pre>
    <pre> Email: <input type="text" name="email" size="30" /></pre>
    <pre> Subject: <input type="text" name="subject" size="30" /></pre>
    <pre> Message: <textarea name="Message" rows="8" cols="50" /></textarea></pre>

    <pre> <input type="submit" value="Send Email" /> </pre>

    </form>

    <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />

    <br />
    </div>
    What am I doing wrong here. Can anyone offer advice please?


    Stewarty-boy.

  2. #2
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This validates:
    Code:
    <div id="middlecolumn">
    
    <br /> <br />
    
    <h3> Please fill in your details below and we will reply to you as soon as possible! </h3>
    <br />
    <form method="post" action="mailer">
    <p>Name: <input type="text" name="name" size="30" /></p>
    <p>Email: <input type="text" name="email" size="30" /></p>
    <p>Subject: <input type="text" name="subject" size="30" /></p>
    <p>Message: <textarea name="Message" rows="8" cols="50"></textarea></p>
    
    <p> <input type="submit" value="Send Email" /> </p>
    
    </form>
    
    <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
    <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
    <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
    
    <br />
    </div>
    Some questions:

    Why are you using <pre> - strange usage? I've replaced <pre> with <p> and taken out the false ending on <textarea>

    Why are you using so many <br /> tags at the bottom?
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  3. #3
    SitePoint Enthusiast Stewarty-Boy's Avatar
    Join Date
    Dec 2003
    Location
    Dundee, Scotland.
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    However...

    Hi John Colby.

    Thanks for that. It does validate. However, My text boxes are out of line with each other. Is there anyway I could fix this. For example adding spaces within a line without the <pre> element as XHTML 1.1 doesn't like this.


    Thanks in Advance.

    Stewarty-boy.

  4. #4
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,216
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    your text boxes are out of line because your P font is proportional

    now it makes sense why you were using PRE

    you could try assigning a monospace font to the P's within the form, but then you'd have to add &nbsp; spaces, and it could get messy

    you could try the ALA method (see http://www.alistapart.com/articles/practicalcss/ part way down the page) but if you ask me, it's clunky and the code is ugly

    or you could try (shock! horror!) a table
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  5. #5
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937
    or you could try (shock! horror!) a table
    What's wrong with a table for tabular data - a form arranges question and response in order - and a table is IMHO the correct way of presenting them.

    Tables are designed for ease of viewing and presenting data - and this is one of those instances.
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  6. #6
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,216
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    forgot one: a DL

    see http://www.clagnut.com/blog/241/

  7. #7
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,216
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    nothing's wrong with a table in this instance

    it's what i use myself

    the "shock! horror!" was aimed at css purists

    your last comment "Tables are designed for ease of viewing and presenting data" is a bit too general, though, because it could be used to rationalize/justify presenting the typical web site 2- or 3-column layout in a table, and clearly, that's not tabular data, even though it's data, and even though the web d3zign3rs might claim that a 2- or 3-column layout enhances "ease of viewing" (which in my mind it clearly does not)

    rudy

  8. #8
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937
    the "shock! horror!" was aimed at css purists
    I will not use tables only for layout - therefore a bit of a CSS purist.

    Quote Originally Posted by r937
    your last comment "Tables are designed for ease of viewing and presenting data" is a bit too general, though, because it could be used to rationalize/justify presenting the typical web site 2- or 3-column layout in a table, and clearly, that's not tabular data, even though it's data, and even though the web d3zign3rs might claim that a 2- or 3-column layout enhances "ease of viewing" (which in my mind it clearly does not)

    rudy
    Yes agree with your qualifcations - phraseology at this time of night after imbibation of festive spirit is not too exact
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  9. #9
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,216
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    imbibation !!

  10. #10
    SitePoint Enthusiast Stewarty-Boy's Avatar
    Join Date
    Dec 2003
    Location
    Dundee, Scotland.
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Got there in the End...

    Hi there John Colby & r937.

    Thanks for your help. I had a look at the links you both posted. I decided to place the title of each text field above their respective text boxes as opposed to the left of them. I then put each title and textbox into a seperate <p class="#"> and give it a margin-left of 70px. I then simply used a <br /> to have a title and textbox on seperate lines. Phew...it validates nicely.

    Thanks for your help. I managed to avoid using tab... ta.. t.. I can't bring myself to say the word. That tabular data thingy. You know the one I mean.


    Thank you and have a Very Merry Christmas Y'all.


    Stewarty-boy.

  11. #11
    SitePoint Enthusiast Stewarty-Boy's Avatar
    Join Date
    Dec 2003
    Location
    Dundee, Scotland.
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    One last thing.

    Sorry Folks.

    One last thing. How do you get images to align to the center when inside a div which has its text-align: left; ...and get it validated?

    I tried using <h3> <img...> </h3> . It worked but didn't validate. I also tried a <p class="#"> and a <span class="#">. None of these validated to XHTML 1.1 either. What am I doing wrong here? I just don't understand it. Here's what I get:
    Line 224, column 5: document type does not allow element "h3" here; missing one of "button", "map", "object", "ins", "del", "noscript" start-tag

    <h3> <img src="/images/jute-city/tutorial-screenshots/mta-client-v03b.jpg" alt...</h3>
    Here's some of my code:
    <br /><br />
    <h3> <img src="/images/jute-city/tutorial-screenshots/mta-client-v03b.jpg" alt="MTA Client-v0.3b" /> </h3>
    <br /><br />


    h3 {
    color: #8E0090;
    font-weight: normal;
    font-size: 13px;
    text-align: center;
    font-family: tahoma, verdana, sans-serif;
    margin-top: 0px; margin-bottom: 3px;
    }
    I do hope someone knows where I'm going wrong here or it's Christmas in the funny farm with a cork on the fork.


    Stewarty-boy.

  12. #12
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,216
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    tsk tsk, please ditch <br /> tags used for spacing purposes

    and please don't even think of using an H3 merely to achieve something so unsemantic (if that's a word) as centering

    if the div you want to place your images into has text-align:left, may i ask why you couldn't just change that?

    and if for some reason you cannot, then just nest another div with width:100% and text-align:center

    i am a firm opponent of divitis but sometimes you just gotta, you know?

    rudy

  13. #13
    SitePoint Enthusiast Stewarty-Boy's Avatar
    Join Date
    Dec 2003
    Location
    Dundee, Scotland.
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mmmmmmm

    Hi Rudy.

    The validator doesn't allow the div element here either:
    Line 224, column 17: document type does not allow element "div" here; missing one of "button", "map", "object", "ins", "del", "noscript" start-tag

    <div id="image">
    I'm gonna have a few pages with a few centred images on them so I was initially compelled to use a div class. That didn't validate. I then attempted an div id. The 2 methods centred the image okay but didn't validate. Here's the deal:
    #image {
    width: 580px;
    padding: 0;
    text-align: center;
    background-color: #FFFFFF;
    }

    <div id="image">
    <img src="/images/jute-city/tutorial-screenshots/mta-client-v03b.jpg" alt="MTA Client-v0.3b" />
    </div>
    How could this be???

    Incidentally. Referring back to your last post. How could I get round not using <br /> tags?

    Stewarty-boy.

  14. #14
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by r937
    That's not a bad way to lay forms out, and it actually comes out cleaner than the ALA form example.

  15. #15
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,216
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    when the validator says a div is not allowed somewhere, i would have to see the context to interpret it for you

    got url?

    how to get around not coding <br /> tags? easy, just apply margin and/or padding in your style sheet to whatever comes before and/or after wherever the <br /> tags used to be

    again, can't tell you much more without context

    got url?

  16. #16
    SitePoint Enthusiast Stewarty-Boy's Avatar
    Join Date
    Dec 2003
    Location
    Dundee, Scotland.
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Url

    Hi again Rudy.

    Here's the URL to one of the pages I used the div on: http://www.gta-jutecity.pwp.blueyond...gta-3-03b.html
    You'll find the offending <div id="image"> about 2 thirds of the way down at about line 224. Thanks a lot I really appreciate this.

    Hello also Vgarcia.

    I decided to go with the form layout on the link Rudy recommended. However, I don't think I used the same code. I feel a touch of <br itis /> coming on. Getting rid of <br/> tags will be a Sunday job over the holiday sometime. I'll cross that <bridge /> when I come to it. No more jokes. Honest!!!


    Stewarty-boy.

  17. #17
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,216
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    piece of cake when you see the context

    you cannot nest a DIV inside a P

    you'll have to use SPAN instead, or else -- and this is my recommendation -- don't bother centering the image at all!! i mean, what's a few pixels this way or that way?

  18. #18
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,216
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    as for your <br /> tags, let's take this snippet of code for instance:
    HTML Code:
     266: 	<p class="normal">
     267: 		<span class="underbold"> Note:</span> Pressing <b>Alt</b>+<b>Tab</b> on your key board ...
     268: 	</p>
     269: 
     270: 		<br />
     271: 
     272: 		<hr class="bigthin" />
     273: 
     274: 		<br />
     275: 
     276: 		<span class="underbold">For Your Information:</span>
     277: 
     278: 		<br />
     279: 		<br />
     280: 
     281: 	<p class="normal">
     282: 		When you press escape during ...
    first of all, if you find yourself coding class="normal" on most P tags, then you are not taking best advantage of css

    but let's say for the sake of argument that you actually need to define your Ps with the "normal" class

    just add margin-top: 2em; to the style definition, and you can remove all those <br /> tags

    tip: use a text editor with search/replace

    as for <span class="underbold"> that is an abomination and should be recoded as H4 or something

    rudy

  19. #19
    SitePoint Enthusiast Stewarty-Boy's Avatar
    Join Date
    Dec 2003
    Location
    Dundee, Scotland.
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up It works...It works... It works...

    Hey Rudy.

    Pure genuis. It works. It validates. Hell it even made me smile too. However, I think you're absolutely correct about thoses pesky <br /> tags being kept to a minimum. As you'll be aware from looking at my code, that page was absolutely riddled with them. You learn something new every day I guess.

    <edit> just noticed your last post. I now intend spending a day next week implementing your margin suggestion. Cheers. </edit>

    Thank you ever so much. I really appreciate your help with what I can only say was the final showdown in terms of me getting my site finished. It only leaves me now to wish you a Wonderful Merry Christmas and a Happy New Year and to also extend my Best Wishes to anyone reading this.


    Thanks Again.

    Stewarty-boy.


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
  •