Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    199
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Magic Submit Button!

    Hi,

    The following code seems to be valid:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    
    <title>Sample Form</title>
    
    <style type="text/css">
    
    input {width:500px; padding:3px; background:green; border:1px solid red;}
    
    textarea {width:500px; height:150px; padding:3px; background:green ; border:1px solid red;}
    
    </style>
    
    </head>
    <body>
    
    <form action="">
    
    <p><input id="entry_0"><label for="entry_0">Name</label></p>
    
    <p><input id="entry_1"><label for="entry_1">Email</label></p>
    
    <p><input id="entry_2"><label for="entry_2">URL</label></p>
    
    <p><textarea id="entry_3" rows="5" cols="5"></textarea></p>
    
    <p><input type="submit" value="Submit"></p>
    
    </form>
    
    </body>
    </html>
    However, the submit button width is shorter than other fields. Strangely when I remove the doctype declaration, they all get the same length. What am I doing wrong and how can I make them the same size?

    Thanks in advance!
    Rain Lover

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Rain Lover,
    input {width:508px; padding:3px; background:green; border:1px solid red;}works.
    I'm not sure why but the textarea obeys the box model rules by adding your padding/border to the 500px width.
    The input button is putting your padding/border inside the 500px width.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    199
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello Rain Lover,
    input {width:508px; padding:3px; background:green; border:1px solid red;}works.
    I'm not sure why but the textarea obeys the box model rules by adding your padding/border to the 500px width.
    The input button is putting your padding/border inside the 500px width.
    When Excavator provides no definite explanation/solution, it means the problem is too complicated.

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    You should not be using the DOCTYPE you are. For maximum compatibility, and to make our lives a lot easier, please always use a Strict DOCTYPE when creating a new document.

    You can also cut down your form code to make it cleaner and more semantic quite easily.
    Code:
    <form action="" method="get">
      <fieldset>
        <input id="name" name="name" type="text"><label for="name">Name</label><br/>
        <input id="email" name="email" type="text"><label for="email">Email</label><br/>
        <input id="website" name="website" type="text"><label for="website">URL</label><br/>
        <textarea id="message" name="message" rows="5" cols="5"></textarea>
        <input type="submit" value="Submit">
      </fieldset>
    </form>
    This has the added bonus of allowing browsers to auto-fill the user's data.


  •  

    Posting Permissions

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