SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict next2heaven's Avatar
    Join Date
    Apr 2005
    Posts
    257
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Width of text field with Strict Doctype

    When you set the Doctype to Strict and do the following:

    <div style="width:200px; background-color: #f0f">
    <label for="fname">First Name</label>
    <div style="background-color:#cccccc;"><input type="text" name="name" id="name" value="1" style="width:100%;" /></div>
    </div>

    it will end up making the input field longer than the <div> block. Why? Where does this extra padding come into play? I've set the padding on the input field to 0 and it still goes beyond. Can anyone explain what's going on with that? Thanks.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, we would need to see a site for a better diagnosis. What browser is this happening in?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Addict next2heaven's Avatar
    Join Date
    Apr 2005
    Posts
    257
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    This is the whole page:

    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>Welcome</title>
    
    </head>
    <body>
    <div style="width:200px; background-color: #f0f">
    	<label for="fname">First Name</label>
    	<div style="background-color:#cccccc;"><input type="text" name="name" id="name" value="1" style="width:100%;" /></div>
    </div>
    </body>
    </html>
    Overflows in Firefox and Safari on the mac.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, the borders are causing the overflow . Borders add to the total width.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    it will end up making the input field longer than the <div> block. Why? Where does this extra padding come into play? I've set the padding on the input field to 0 and it still goes beyond. Can anyone explain what's going on with that? Thanks.
    I would guess that the borders on the input are playing a role in this. I'm not a form expert by no means, still learning myself. I can get what you are after by setting the 200px width on the input and giving it an inline-block display;

    Then remove the width from the parent div and let it shrink wrap with inline-block also. Tested in FF3, Opera & Safari.

    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>demo</title>
    <style type="text/css">
    #wrap {
        display:inline-block;
        background:#F0F
    }
    #wrap div{
        background:#CCC;
    }
    #wrap div input{
        display:inline-block;
        width:200px;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
        <label for="fname">First Name</label>
        <div><input type="text" name="name" id="name" value="1" /></div>
    </div>
    </body>
    </html>

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You can loose that inner div also by just using a <br> tag.
    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>demo</title>
    <style type="text/css">
    #wrap {
        display:inline-block;/*shrink wrap*/
        background:#F0F;
    }
    #wrap input{
        display:inline-block;/*set a width*/
        width:200px;
        margin:0;/*safari*/
    }
    </style>
    </head>
    <body>
    <div id="wrap">
        <label for="fname">First Name</label>
        <br />
        <input type="text" name="name" id="name" value="1" />
    </div>
    </body>
    </html>

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ray that example will still be 204px (2 x 2px) wide due to the 2px (outset!) borders applied by default. Although it works well otherwise

    You could do it (semi) automatically using the technique I posted the other day for textareas.

    e.g.
    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>Welcome</title>
    <style type="text/css">
    .wrap {
        width:192px;
        padding:0 4px;
        background-color: #f0f;
        overflow:hidden;
    }
    .wrap input {
        padding:2px;
        width:100&#37;;
        margin:0 -1px 0 -4px;
        float:left;
        clear:both
    }
    </style>
    </head>
    <body>
    <form action="">
        <div class="wrap">
            <label for="fname">First Name</label>
            <input type="text" name="name" id="name" value="1"  />
        </div>
    </form>
    </body>
    </html>
    The example works by adding padding to the parent equal to the border width (and any extra padding you want on the input) and then setting the input to 100% wide. This makes it too big but then its dragged back into the padding of the parent using negative margins and then fits exactly.

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Ray that example will still be 204px (2 x 2px) wide due to the 2px (outset!) borders applied by default. Although it works well otherwise

    You could do it (semi) automatically using the technique I posted the other day for textareas.
    Hi Paul
    Yes I had seen that method you used for textareas. It looks like it's just a basic neg-margin drag into parent padding with more favor to the left margin.

    I expected that it all should have been wrapped in a form element too, just now cutting my teeth with forms. I avoided them for a long time but now I am regretting that since I have some coming up on a project.

    I just ran into an issue with IE6/7 and a floated form, I will post a thread and see what your thoughts are on that.

  9. #9
    SitePoint Addict next2heaven's Avatar
    Join Date
    Apr 2005
    Posts
    257
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Agreed. Forms are such a pain. I'm working on a Wufoo type project where developers can create the form visually and then have it write all the code complete with css theme for the CodeIgniter framework. It's nice because you can tell it to save to a database, pull the record from a database to prepopulate the form and/or email the form.

    It just take so long to put those pieces together and have it be consistant without errors throughout your application/site.

  10. #10
    SitePoint Addict next2heaven's Avatar
    Join Date
    Apr 2005
    Posts
    257
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought it'd be nice to only have to change the main div wrapper's width for the form so that the form fields can stretch to the end of the div wrapper or be half it's size, etc. I'm thinking this isn't the best way. I guess pixels it is.

    I appreciate all the comments about this topic.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I thought it'd be nice to only have to change the main div wrapper's width for the form so that the form fields can stretch to the end of the div wrapper or be half it's size, etc.
    My method above allows that automatically.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by next2heaven View Post
    I thought it'd be nice to only have to change the main div wrapper's width for the form so that the form fields can stretch to the end of the div wrapper or be half it's size, etc. I'm thinking this isn't the best way. I guess pixels it is.

    I appreciate all the comments about this topic.
    As Paul said, as long as you don't change the input at all then Pauls way will work. He does 100%width/border and then drags it over witrh a negative margin equating the total borders (and padding if he set, I forget).

    It's very effective
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    SitePoint Addict next2heaven's Avatar
    Join Date
    Apr 2005
    Posts
    257
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gotcha. And this approach works in all browsers?

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    It should work well in modern browsers and I checked in ie6 - 8, firefox3+, opera10 and safari4 but I've learned never to say "all" browsers

  15. #15
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Here's the thread Paul was referring to with the textarea's if you're intersted:
    http://www.sitepoint.com/forums/showthread.php?t=649486


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
  •