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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    textarea overlap padding problem, Firefox

    Hi,

    I've got a textarea contained in a div. The div has 'padding:4px;'.

    Firefox does not seem to respect this padding. The right side of the textarea overlaps and you get a 2px padding on the right side. Any help would be appreciated, I have searched google to no avail, thanks. Here is the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Div padding</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
    textarea {
     border:1px solid #000;
    }
    .content {
     padding:4px;
     background-color:red;
     border:1px solid #000;
    }
    </style>
    </head>
    <body>
    
    <div class="content">
    <textarea rows="0" cols="0" style="width:100%; height:200px;"></textarea>
    </div>
    
    </body>
    </html>
    Last edited by dasnk; 04-11-2006 at 11:42 AM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    It does accept it except that 100% plus the 1px border causes that extra 2px you see. The border width is added to the 100% not add within it.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Div padding</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    border:0;
    }
    textarea {
     background:#00F;
     color:#000;
     border:0;
    }
    .content {
     padding:4px;
     background-color:red;
     color:#000;
     border:1px solid #000;
    }
    </style>
    </head>
    <body>
    
    <div class="content">
    <textarea rows="0" cols="0" style="width:100%; height:200px;"></textarea>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    May 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, thanks aero, that fixed it


  •  

    Posting Permissions

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