SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox Textarea

    I've got a page that uses a textarea. Its width is set to 100% which works almost fine, except that it extends beyond its parent to the right for some reason. Also, the number of rows is set to two, but it seems to have three. What am I doing wrong?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <style type="text/css">
    	#win {
    		margin-left: auto;
    		margin-right: auto;
    		width: 700px;
    		background: green;
    	}
    	#screen {
    		overflow: auto;
    		height: 500px;
    		width: 100%;
    	}
    	#data {
    		width: 100%;
    	}
    	.blue {
    		color: blue;
    	}
    	.red {
    		color: red;
    	}
    	.green {
    		color: green;
    	}
    </style>
    </head>
    <body>
    <div id="win">
    	<div id="screen">
    		<b></b>
    	</div>
    	<textarea id="data" rows="2" cols="20" onkeydown="return entercatch(event);"></textarea>
    	<button id="submitter" type="button" onclick="submit()">Say</button>
    </div>
    
    
    
    </body>
    </html>

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Textarea has to be inside a form.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The default padding and borders combned with the 100% width will make the textarea bigger than its parent.

    Set the padding and borders that you want and set the size in px.

    e.g.

    Code:
    	#data {
    		width: 696px;
    		padding:1px;
    		border:1px solid #000;
    	}

  4. #4
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    Textarea has to be inside a form.
    According to whom?

    Is the textarea too wide in IE only? If so, you can feed IE with width:99% or so with some hack.

    As for the rows, try to specify the height with CSS.
    Simon Pieters

  5. #5
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    The default padding and borders combned with the 100% width will make the textarea bigger than its parent.
    At least Firefox applies box-sizing:border-box to textareas by default (IIRC), which effectively means that the IE5 box model is used instead.
    Simon Pieters

  6. #6
    SitePoint Member
    Join Date
    May 2006
    Location
    Southampton UK
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Forms and css seem to be a bit of a hassle accross browsers, what annoys me is trying to get IE and firefox to aggree on input and textarea widths, proably what you may be getting.

    Also the way safari decides to ignore your background-colors and images on a submit button.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by simon
    At least Firefox applies box-sizing:border-box to textareas by default
    I think its the other way around actually Simon and IE uses the border box because it was Firefox that was larger in the above example .

    However that gives me an idea and you could force the issue for mozilla like so:

    Code:
    	#data {
    	width:100%;
    -moz-box-sizing:border-box;/* proprietary moz code*/
    }

    I believe Opera uses the same method as IE but i've no idea about other browsers like safari etc.

    Therefore the first solution I offered is probably the safest in specifying the dimensions explicitly

  8. #8
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, it's wider for some reason in firefox, it works just as I expect it to in IE. I guess I'll just decide on a set pixel size so it'll be the same across browsers.

    Anyway, why am I getting three lines in firefox instead of two?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    nyway, why am I getting three lines in firefox instead of two?
    As Simon already said just give the textarea a height and it will be more reliable and will over-rule the rows attribute..

    Code:
    #data {height:2.5em}

  10. #10
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    I think its the other way around actually Simon and IE uses the border box because it was Firefox that was larger in the above example .
    Oh, right. Firefox only uses border-box for textareas in quirks mode.
    Simon Pieters

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Firefox only uses border-box for textareas in quirks mode.
    Thanks for the info Simon


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
  •